一、文件监听
文件监听能让我们在文件更改保存之后，自动的打包文件。
配置方法有两种：
- 在package.json的scripts中的启动命令行中加上--watch。
- 在webpack.config.js中配置watch: true。
原理：
webpack会轮询的检测文件是否更新，会将最后一次更新的时间进行记录，当下次文件更新时，webpack会对这两个时间进行对比，如果不一致，就将更改文件列表进行缓存，并且等待一段时间，这段时间内如果有更改，就一起缓存，等时间到了，将更改文件一起构建，生成到bundle文件里。
存放路径：本地的磁盘中。
这种有一个缺点，就是每次更改，都要手动的更新浏览器。
二、热更新
热更新，更改完代码保存之后，webpack自动打包，浏览器不刷新，只更改修改的依赖代码。
1、使用webpack-dev-server和HotModuleReplacementPlugin（内置）插件。
基础配置：
package.json的scripts中：
增加"dev": "webpack-dev-server"。
webpack.config.js中：
const path = require("path");const HtmlWebpacPlugin = require("html-webpack-plugin");const webpack = require("webpack");module.exports = { mode: "development", entry: "./src/index.js", output: { path: path.join(__dirname, "dist"), filename: "bundle.js", }, module: { rules: [ { test: /\.js$/, use: "babel-loader", }, { test: /\.(jpg|png|jpeg|gif)$/, use: { loader: "file-loader", options: { name: "[name]_[hash].[ext]", outputPath: "imgs/", }, }, }, ], }, plugins: [new webpack.HotModuleReplacementPlugin()], devServer: { contentBase: path.join(__dirname, "dist"), hot: true, },};
增加了webpack的内置插件HotModuleReplacementPlugin，并且配置了devServer，webpack服务器在访问资源时的配置，contentBase是路径，hot为是否开启热更新。
存放路径：存在内存中。
2、使用webpack-dev-middleware
官方文档上说，webpack-dev-middleware是一个封装器，可以将webpack处理过的文件发送给浏览器，中间我们可以进行一些自定义的操作。webpack-dev-server内部也是使用的它。
首先在package.json的scripts配置"server":"node server.js"。
创建一个server.js文件，内容为：
const express = require("express");const webpack = require("webpack");const webpackDevMiddleware = require("webpack-dev-middleware");const app = express();const config = require("./webpack.config.js");const complier = webpack(config);app.use( webpackDevMiddleware(complier, { publicPath: config.output.publicPath }));app.listen(3000, function () { console.log("listening 3000");});
可以使用app.use对wepack处理过的文件进行自定义。
三、热更新的原理
热更新的各部分介绍：
Webpack Dev Server:
- Bundle Server：提供浏览器可以访问文件的服务器。
- HMR Server：将热更新打包之后的文件交给HMR Runtime。
- Webpack Compiler：将js文件编译成bundle.js。
Browser：
-
HMR Runtime：被注入到bundle.js，更新文件的文件。
-
bundle.js：打包之后的文件。
热更新的过程：
启动过程：
- 启动项目时，webpack会将文件交给Webpack Compiler进行打包。
- Webpack Compiler打包之后，将文件传输给Bundle Server服务器。
- 此时浏览器就可以访问到文件了。
更新过程：
- 代码更新保存之后，发送给Webpack Compiler进行编译。
- 编译好之后，发送给HMR Server。
- HMR Server通知HMR Runtime哪些文件的哪些代码进行了更改，并将更新后的代码发送给HMR Runtime。
- HMR Runtime进行局部刷新。
