webpack的watch

借用 webpack中的source map 的demo。
开发过程中频繁修改&＃xff0c;每次改动都要手动npm run build&＃xff0c;很不耐烦&＃xff0c;有啥好法子么&＃xff1f;
当&＃xff01;然&＃xff01;有&＃xff01;

开启监听模式&＃xff0c;能够监听文件变化&＃xff0c;一旦文件内容更新&＃xff0c;webpack就会自动重新编译&＃xff0c;解决了 手动npm run build 的烦恼。
但想看到 文件更新后的 效果&＃xff0c;还是需要 手动刷新 浏览器。

命令参数

• webpack help
  

• --watch
  使用监听模式

• --watch-aggregate-timeout&＃61;xxx
  单位是 ms。
  --watch-aggregate-timeout&＃61;300的意思是&＃xff0c;文件修改且保存完后&＃xff0c;延迟300ms后再重新编译

• watch-poll&＃61;yyy
  单位是ms。
  watch-poll&＃61;1000的意思是&＃xff0c;每隔1s轮询一次&＃xff0c;询问文件是否发生变化。

npm scripts

//package.json"scripts": {"build": "webpack --config webpack.config.js","watch":"webpack --watch --watch-aggregate-timeout&＃61;5000 --watch-poll&＃61;1000 --config webpack.config.js"},


演示中&＃xff0c;将--watch-aggregate-timeout设置为5000&＃xff0c;即5s。
从 文件修改保存 到 重新编译&＃xff0c;能感受到明显的时延。

webpack.config.js

//webpack.config.js
const path &＃61; require("path");
const {CleanWebpackPlugin} &＃61; require("clean-webpack-plugin");
module.exports &＃61; {mode:"development",devtool:"cheap-source-map",watch:true,watchOptions:{aggregateTimeout:300,poll:1000,ignored:/node_modules/},entry:"./index.js",output:{filename:"bundle.js",path:path.resolve(__dirname,"dist")},plugins:[new CleanWebpackPlugin()]
}


• watch&＃xff1a;true
  开启监听模式。默认false&＃xff0c;即关闭监听模式
• watchOptions
  • aggregateTimeout:300
    同--watch-aggregate-timeout。
    单位是ms。文件修改并保存后&＃xff0c;300ms后再重新编译
  • poll
    同--watch-poll:1000。
    单位是ms。每1s轮询一次&＃xff0c;查看文件是否发生变化。
  • ignored
ignored&＃xff0c;“忽略”的意思。 ignored:/node_modules/&＃xff0c;即不监听node_modules目录下文件的变化。

参考文章

使用监听模式
watch