Front-end white webpack Learning (II)

The previous definition of self-written webpack summary: Static Module for JavaScript service pack and several basic concepts of entry, output, plugins, loaders and so on. Guiding the distal end white webpack learning (a)
following the start webpack specific use.
webpack使用

Create a new project, the project directory as follows.
- Src directory items stored in source, index.html as entry items;
- dist directory for packaged file
2.webpack installation

webpack installed in two ways:
- Global Installation
  
  npm i webpack webpack-cli -g
- Project installation (recommended)
  
  npm i webpack webpack-cli -D
Into the project root directory, input terminalnpm i webpack webpack-cli -D

The installation is complete displays:

At this point, the project will be more of a package-lock.json and node_modules folders

3. Initialize project

Input terminal npm init -y, after the completion of the project root directory of more than a package.json file (forget the screenshots)

4.webpack package
- First, create a file in the src directory main.js, to include code in js. In order to facilitate the writing, I installed the jQuery in the project, the installation commandnpm i jquery -D
```
//main.js

//js中引入jQuery模块
import $ from 'jquery'

$(function () {
  $('li:odd').css('color', 'red');
  $('li:even').css('color', 'blue')
})
```
- Input terminal webpack .\src\main.js -o .\dist\bundle.js, packaged main.js files in src into bundle.js presence dist directory (while watching video learning, teachers are using the command webpack .\src\main.js .\dist\bundle.js, the result of crazy error, but later found after Baidu is webpack version too, should be used webpack .\src\main.js -o .\dist\bundle.js)
  
  After the show finished package:
- In this case, under the dist directory of more than a bundle.js file. Bundle.js introduced in index.html, the page has been displayed changes. Description Packaging Success.
5.webpack Configuration

Creating the project root directory webpack.config.js file, the command does not specify if the package files when the project package, webpack will be user-configured to operate under the application file. (In the node, '__ dirname' absolute path of the file to be executed)
```
//webpack.config.js

/* node.js 中的path模块，用来处理文件路径 */
const path = require('path')
/* 向外输出配置模块 */
module.exports = {
    entry:path.join(__dirname,'./src/main.js'), //打包入口，将main.js打包
    output:{
        path:path.join(__dirname,'./dist'), //打包输出路径
        filename:'bundle.js'    //打包输入文件名
    }
}
```
此时，删除之前dist目录下的bundle.js文件，终端中直接输入webpack，会重新生成一个bundle.js，打包成功

6.webpack-dev-server使用

webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,
- 终端输入npm i webpack-dev-server -D安装webpack-dev-server，安装成功如下。
- 点开package.json文件，在scripts标签下配置webpack-dev-server
```
此时，运行`npm run dev`，项目在打包后会自动运行在localhost上（默认为8080端口，我的8080端口被占用了，因此变成了8081）

![](https://img2018.cnblogs.com/blog/1879373/201911/1879373-20191126090743503-346502267.png)

进入http://localhost:8081/，页面显示如下

![](https://img2018.cnblogs.com/blog/1879373/201911/1879373-20191126090805378-398244847.png)

点击进入src后，显示项目主页面，即entry中配置的页面
```
- webpack参数配置
  1. 在package.json中配置
  "dev":"webpack-dev-server --open --port 5000 --hot --contentBase src"
```
 --open :打包完成后自动打开页面

 --port 5000：指定服务器端口号为5000

 --hot：模块热替换。配置这个参数可以让页面在加载时只替换更新过的部分，而不是页面重载

 --contentBase src：指定服务器的根目录为src目录，webpack-dev-server默认以当前目录为基本目录
```
  1. 或者进入webpack.config.js中，在输出模块中配置。此时package.json中应配置为"dev":"webpack-dev-server"
```
/* node.js 中的path模块，用来处理文件路径 */
const path = require('path')
/* 向外输出配置模块 */
module.exports = {
    entry:path.join(__dirname,'./src/main.js'), //打包入口，将main.js打包
    output:{
        path:path.join(__dirname,'./dist'), //打包输出路径
        filename:'bundle.js'    //打包输入文件名
    },
    devServer:{  //webpack-dev-server配置
        open:true,
        port:5000,
        contentBase:'src',
        hot:true
    }
}
```
  - 终端输入npm run dev，运行后直接进入项目主页面

Front-end white webpack Learning (II)

Guess you like