前端小白webpack学习（二）

前一篇写了自我总结的webpack定义：为JavaScript服务的静态模块打包器和几大基本概念 entry、output、plugins、loaders等。指路前端小白webpack学习（一）
下面开始webpack的具体使用。
webpack使用

创建新项目，项目目录如下。
- src目录下存放项目源码，index.html作为项目入口；
- dist目录存放打包好的文件
2.webpack安装

webpack安装分两种：
- 全局安装
  
  npm i webpack webpack-cli -g
- 项目中安装（推荐）
  
  npm i webpack webpack-cli -D
进去项目根目录，终端输入npm i webpack webpack-cli -D

安装完成显示：

此时，项目中会多出一个package-lock.json和node_modules文件夹

3.初始化项目

终端输入npm init -y，完成后项目根目录多出一个package.json文件（忘截图了）

4.webpack打包
- 首先，在src目录下创建一个main.js文件，js中写入相应代码。为了书写方便，我又在项目中安装了jQuery，安装命令为npm i jquery -D
```
//main.js

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

$(function () {
  $('li:odd').css('color', 'red');
  $('li:even').css('color', 'blue')
})
```
- 终端输入webpack .\src\main.js -o .\dist\bundle.js，将src下的main.js文件打包成bundle.js存在dist目录下（看学习视频时，老师使用的命令是webpack .\src\main.js .\dist\bundle.js，结果疯狂报错，后来百度之后发现是webpack版本过高，应该用webpack .\src\main.js -o .\dist\bundle.js）
  
  打包完之后显示：
- 此时，dist目录下多出一个bundle.js文件。在index.html中引入bundle.js,页面中已经显示变化。说明打包成功。
5.webpack配置

项目根目录下创建webpack.config.js文件，打包时若命令中没有指定项目的打包文件，webpack则会去该文件下应用用户配置的操作。（在node中，'__dirname'指向被执行文件的绝对路径）
```
//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，运行后直接进入项目主页面

前端小白webpack学习（二）

猜你喜欢