详解webpack的文件监听实现(热更新)
前言
文件监听是在源码发生变化时，自动重新构建出新的输出文件。
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:notestspecified\"&&exit1",
"build":"webpack",
"watch":"webpack--watch"//新增配置
}
//...
}
1.2到控制台输入npmrunwatch
1.3修改文件，保存后，会自动打包，到浏览器刷新，才能看到变化。
1.4文件监听的原理理分析
轮询判断文件的最后编辑时间是否变化
某个⽂件发⽣生了了变化，并不会⽴刻告诉监听者，⽽是先缓存起来，等aggregateTimeout
module.export={
//默认false，也就是不不开启
watch:true,
//只有开启监听模式时，watchOptions才有意义
wathcOptions:{
//默认为空，不监听的文件或者文件夹，支持正则匹配
ignored:/node_modules/,
//监听到变化发生后会等300ms再去执行，默认300ms
aggregateTimeout:300,
//判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的，默认每秒问1000次
poll:1000
}
}
2第二种方式，在配置webpack.config.js中设置watch:true（热更新:webpack-dev-server）
2.1配置package.json
{
//...
"scripts":{
"test":"echo\"Error:notestspecified\"&&exit1",
"build":"webpack",
"dev":"webpack-dev-server--open"//新增配置，运行npmrundev会自动打开浏览器
}
//...
}
2.2配置webpack.config.js
'usestrict'
constpath=require('path');
varwebpack=require('webpack');//引进webpack
module.exports={
//...
mode:'development',//production改为开发环境，因为只有开发环境才用到热更新
module:{
//...
},
plugins:[
newwebpack.HotModuleReplacementPlugin()
],
devServer:{
contentBase:'./dist',
hot:true
}
}
2.3到控制台运行npmrundev，即可运行！
到此这篇关于详解webpack的文件监听实现(热更新)的文章就介绍到这了,更多相关webpack文件监听内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。