本文详解Webpack的文件监听机制，对比两种开启方式：通过--watch参数手动刷新构建，以及通过webpack.config.js配置watch开启热更新。重点介绍webpack-dev-server（WDS）的优势，包括内存输出、自动刷新及HotModuleReplacementPlugin的使用，并解析轮询监听原理与配置参数。
前言
Webpack 文件监听的两种开启方式
文件监听功能旨在源码发生变动时，自动触发新的输出文件构建过程。Webpack 提供了两种开启监听模式的方法：
第一种方法是在启动 Webpack 命令时添加 --watch 参数。该方式的唯一局限在于，构建完成后必须手动刷新浏览器页面才能查看到最新的变化效果。
第二种方法是在 webpack.config.js 配置文件中设置 watch: true。此方式具备以下显著优点： (1) Webpack Dev Server (WDS) 不会强制刷新浏览器。 (2) WDS 不将文件输出到磁盘，而是直接保存在内存中。 (3) 配合使用 HotModuleReplacementPlugin 插件可实现模块热替换。
--watch 参数实现与局限
第一种方式：使用 --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 修改源文件并保存后，Webpack 会自动执行打包操作。此时需手动刷新浏览器，方可看到更新后的结果。
文件监听原理：轮询与缓存机制
1.4 文件监听原理分析
其核心机制是通过轮询方式判断文件的最后编辑时间是否发生更改。
当某个文件发生变化时，系统并不会立即通知监听者，而是先将变更缓存起来，等待 aggregateTimeout 设定的时间窗口结束后再统一处理。
module.export = {
//默认 false，也就是不不开启
watch: true,
//只有开启监听模式时，watchOptions才有意义
wathcOptions: {
//默认为空，不监听的文件或者文件夹，支持正则匹配
ignored: /node_modules/,
//监听到变化发生后会等300ms再去执行，默认300ms
aggregateTimeout: 300,
//判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的，默认每秒问1000次
poll: 1000
}
}
webpack-dev-server 热更新配置
第二种方式：在 webpack.config.js 中设置 watch: true（配合热更新：webpack-dev-server）
2.1 配置 package.json
{
// ...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --open" // 新增配置，运行 npm run dev 会自动打开浏览器
}
// ...
}2.2 配置 webpack.config.js
'use strict'
const path = require('path');
var webpack = require('webpack'); // 引进 webpack
module.exports = {
// ...
mode:'development', // production 改为开发环境，因为只有开发环境才用到热更新
module:{
// ...
},
plugins:[
new webpack.HotModuleReplacementPlugin()
],
devServer:{
contentBase:'./dist',
hot: true
}
}2.3 在控制台运行 npm run dev 即可启动服务。
至此，关于 Webpack 文件监听及热更新实现的详细介绍完毕。如需了解更多 Webpack 文件监听相关内容，建议搜索本站过往文章或继续阅读后续章节，感谢大家的支持。