「这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战」
1. Webpack 的 watch 模式
webpack给我们提供了watch模式：- 在该模式下，
webpack依赖图中的所有文件，只要有一个发生了更新，那么代码就会被重新编译； - 这样一来，我们就不需要手动去运行
npm run build指令了；
- 在该模式下，
- 如何开启
watch模式呢？有两种方式：- 在启动
webpack的命令中，添加--watch标识； - 在导出的
webpack配置中，添加watch: true；
- 在启动
我们先来看第 1 种方式。我们知道，之前我们运行的 npm run build 命令，实际上会找到 package.json 中 scripts 中的 build 项对应的脚本来执行：
这里也就是执行 webpack 命令（相当于执行 npx webpack）。但是这样直接执行 webpack 命令时，webpack 只是帮组我们进行了打包，如果我们还希望它能监听整个依赖图中文件的变化，当文件发生变化时，webpack 能自动帮助我们重新编译代码。那么，我们就可以在 webpack 这个脚本后面加上 --watch 标识：
你可能会问，增加上这个标识之后，到底发生了什么？其实，当我们添加上这个
--watch标识后，它会被之前我们安装过的webpack-cli工具处理的，webpack-cli会把这个标识最终转换成导出的配置中的watch: true。
然后，我们再来运行 npm run build 命令进行打包：
你会发现，打包成功后，命令行终端中的光标停在了最后。我们再来用 Live Server 打开 build/index.html，在浏览器中打开控制台，目前的效果是这样的：
这时，我们可以来到 src/main.js 文件中，在文件的最后添加一行代码，在控制台打印一些内容：
...
console.log('你好');
添加完代码我们再进行保存后，你会发现命令行终端中会显示出 webpack 自动帮我们重新编译了代码：
所以，再借助于 Live Server，浏览器控制台中也自动更新了最新打包后的代码的效果：
以上，演示的就是 watch 模式的作用：在该模式下，只要 webpack 依赖图中所有文件中的任意一个文件发生了修改，代码就会被重新编译。而 Live Server 插件会监听代码的变化，一旦发现有变化，就会重新刷新页面。也就是说，自动刷新网页的功能现在是 Live Server 帮助我们完成的。总之，现在我们的开发效率就比较高了，因为只要我们修改了源代码，就可以立马在浏览器页面中看到对应的效果。
当然，上面是设置 watch 模式的第 1 种方式，我们也可以使用第 2 种方式：在导出的 webpack 配置中，添加 watch: true。因为在启动 webpack 的命令中，添加 --watch 标识的方式，本质上是通过 webpack-cli 工具将 --watch 转成了对应的配置选项（watch: true）而已。所以，我们完全可以自己来添加这一配置选项，我们可以把 package.json 中 scripts 中的 build 项对应的脚本中的 --watch 删除掉，然后在 webpack.config.js 文件中添加 watch: true 的配置：
...
module.exports = {
mode: 'development',
devtool: 'source-map',
watch: true, // 开启 watch 模式
...
}
添加完后，我们在命令行终端中按 Ctrl + C 把 watch 模式终止掉，然后重新执行 npm run build 命令进行打包：
你会发现，这次在编译成功后，webpack 同样会阻塞进程，监听文件的变化，一旦我们修改了某个源文件，webpack 就会来进行重新编译。比如我们再对 src/main.js 文件做修改：
...
console.log('你好啊~');
之后，你会发现命令行终端中又打印出了 webpack 重新编译过程的信息，并且借助于 Live Server 开启的本地服务器，我们在浏览器页面中也能看到最新的编译后的代码运行的效果：
以上，就是 webpack 开启自动编译功能的第一种方式：watch 模式（即监听文件的变化，文件变化后，webpack 会自动帮我们重新编译而已）。
