[webpack教程] 2.起飞之实时内容更新

前言与背景

上一章节已经讲述了webpack的使用与入门，现继续讲解如何做到实时内容更新？

前置准备

项	版本
vscode	1.42.1
node	12.4.0
cnpm	6.1.1
webpack	4.41.6
webpack-cli	3.3.11
webpack-dev-server	3.10.3
url-loader	3.0.0
html-webpack-plugin	3.2.0
css-loader	3.4.2
style-loader	1.1.3
less-loader	5.0.0
sass-loader	8.0.2
node-sass	4.13.1
babel-core	6.26.3
babel-preset-es2015	6.24.1
babel-loader	8.0.6
@babel/core	7.8.6
@babel/plugin-transform-runtime	7.8.3
@babel/runtime	7.8.4
@babal/plugin-proposal-class-properties	7.8.3
@babel/preset-env	7.8.6
vue	2.6.11
vue-loader	15.9.0
vue-template-compiler	2.6.11

续上节
[webpack教程] 1.初探之从零开始
教程之添加webpack-dev-server

一、实时内容更新插件 webpack-dev-server

为了减少每次内容更新需要重新打包问题，我们可以实时监听文件内容的变化，类似一个摄像头，可以依据实际场景记录每天发生的事情。因此，就出现了webpack-dev-server自动帮助编译打包命令。

二、安装

cnpm i webpack-dev-server -D

具体安装版本见实际命令执行结果，若未指定版本则直接安装最新版。

指定版本安装命令：

cnpm i [email protected] -D

三、安装依赖项

3.1 安装webpack与webpack-cli

webpack
webpack-cli
由于前教程安装的是全局，此处需要使用，请再次进行项目对应的安装，原理与环境变量对应不同用户相似。

cnpm i webpack -D
cnpm i webpack-cli -D

3.2 修改package.json

安装成功后修改package.json文件内容，修改script中的dev属性：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --mode development"
  },

3.3 测试

由于webpack-dev-server已集成webpack。因此，运行webpack-dev-server和webpack拥有一样的效果，能自动监听文件变化，同时完成自动打包。
运行命令：

npm run dev

webpack-dev-server将自动启动本地服务器，由于webpack是基于node开发的，默认端口为8080，在浏览器输入localhost:8080后可直接展示页面，说明已经配置成功。

四、运行更智能

4.1 增加运行参数

手动开启浏览器比较麻烦，我们可以通过使用webpack-dev-server提供的几个参数，完成一系列的动作，最后一条命令就可以直接一步到位。
在package.json文件上做如下修改，最后调整为：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --mode development --open 'google chrome' --port 3000"
  },

说明：

1. –open 参数：打开指定的浏览器，此处为谷歌的chrome;
2. –port 参数：指定端口。

4.2 查看效果

npm run dev

4.3 其他参数说明

1. –hot 参数：热加载，即每次重新编译都生成一个新的打包文件。热加载则是增量式加载内容；
2. ----host 0.0.0.0 参数：为局域网内其他主机开放项目访问权限；
3. –content-bash src/ 参数：在浏览器中看到页面而非目录结构。

其实除了可以在package.json中配置dev,也可以在webpack.config.js中通过devServer属性来修改配置。

4.4 修改内容查看结果

修改main.js文件中的cavan为其他内容，然后查看，如果未生效则重新将index.html中的js引入路径修改为

<script src="/bundle.js">script>

现在直接查看在修改内容时，自动刷新，无需执行打包命令或者刷新浏览器就能看到变化。
至此，实时内容更新已经结束。下一章节将了解如何自动打包js文件。

代码下载地址

https://github.com/Cavan2477/webpack_base01.git