详解webpack的文件监听实现(热更新)

前言

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

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

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

1 第一种方式， --watch

1.1 配置package.json

1.2 到控制台输入 npm run watch

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

1.4 文件监听的原理理分析

轮询判断文件的最后编辑时间是否变化

某个⽂件发⽣生了了变化，并不会⽴刻告诉监听者，⽽是先缓存起来，等 aggregatetimeout

2 第二种方式，在配置 webpack.config.js 中设置 watch: true（热更新:webpack-dev-server）

2.1 配置package.json

2.2 配置webpack.config.js

2.3 到控制台运行 npm run dev，即可运行！

到此这篇关于详解webpack的文件监听实现(热更新)的文章就介绍到这了,更多相关webpack 文件监听内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！