目录
1 文件监听
1.1 配置方式
文件监听是在发现源码发生变化时,自动重新构建出新的输出文件,是会更新到磁盘中的
webpack 开启监听模式,有两种方式:
- 启动 webpack 命令时,带上 --watch 参数
- 在配置 webpack.config.js 中设置
watch: true
1.2 监听原理
webpack轮询判断文件的最后编辑时间是否变化
当某个文件发生了变化,并不会立刻告诉监听者,二十先缓存起来,等待aggregateTimeout
module.export = {
wathc: true, //默认false,不开启
watchOptions: {
//watch为true时才有效
//默认为空,不监听的文件或文件夹,支持正则
ignored: /node_modules/,
//监听到变化发生后会等300ms再执行,默认300ms
aggregateTimeout: 300,
//判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的。默认每秒问100次
poll: 1000
}
}
2 浏览器热更新
2.1 使用webpack-dev-server
配合 HotModuleReplacementPlugin
使用
webpack-dev-server
,需要配合HotModuleReplacementPlugin
插件使用,WDS不刷新浏览器,不输出文件,而是放到内存中