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: no test specified\" && exit 1",
"build": "webpack",
"watch": "webpack --watch" // 新增配置
}
// ...
}1.2 到控制台输入 npm run watch
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: 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，即可运行！
看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
