Webpack的文件监听实现（热更新）是如何工作的？

本文共计726个文字，预计阅读时间需要3分钟。

前言：文件监听是在源代码发生变更时，自动重新构建输出文件的机制。Webpack 配置监听模式，有如下两种方式：

1. 启动 Webpack 命令时，带上 `--watch` 参数。 缺点：需要手动刷新才能看到变化。

前言

文件监听是在源码发生变化时，自动重新构建出新的输出文件。
webpack 开启监听模式，有两种方式：

1.启动 webpack 命令时，带上 --watch 参数。
唯一缺点：需要手动刷新才能看到变化；

2.在配置 webpack.config.js 中设置 watch: true。
优点：
(1) WDS 不刷新浏览器
(2) WDS 不输出文件，⽽是放在内存中
(3) 使⽤用 HotModuleReplacementPlugin 插件

1 第一种方式， --watch

1.1 配置package.json

{ // ... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "watch": "webpack --watch" // 新增配置 } // ... }

1.2 到控制台输入 npm run watch

1.3 修改文件，保存后，会自动打包，到浏览器刷新，才能看到变化。