9. 重学webpack——watch和watchOptions的使用和作用

推荐：《webpack学完这些就够了》

《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。

以下是本节正文：

watch和watchOptions的使用

我们在开发环境下，可以用webpack-dev-server去监听文件，文件修改后，就会自动打包，那么生产环境下，能否也可以监听自动打包呢？这就用到了watch和watchOptions配置

// webpack.config.js
module.exports = {
    ...
    watch: true,
    watchOptions: {
        ignored: /node_modules/, // 不监听的文件，经常是用正则
    	aggregateTimeout: 300, // 监听到变化后悔去等300ms后执行,类似de-bound，类似防抖，防止一修改就编译，一修改就编译
    	poll: 1000 // 轮询频率，判断文件是否发生变化是通过不停询问文件系统文件是否有变化（对比文件的更新时间），默认每秒询问1000m次
    },
    ...
}

• watch：是否开启监听。
  • 当我们用npm run build的时候，如果watch为false，则不会监听，自然也就不会自动打包，如果为true，则修改一下文件，就会被监听到，然后重新打包一次，当然打包的频率啥的是根据配置来的
  • 只有watch为true的时候，watchOptions才生效。
• watchOptions：监听的相关配置,常用的属性有：
  • ignored：不监听的文件，经常是用正则
  • aggregateTimeout：监听到变化后悔去等xxxms后执行,类似de-bound，类似防抖，防止一修改就编译，一修改就编译
  • poll：轮询频率，判断文件是否发生变化是通过不停询问文件系统文件是否有变化（对比文件的更新时间），默认每秒询问1000m次

有了上面的配置，可以执行npm run build，在dist会产生打包后的文件，如果文件带hash，那你修改下内容，就又会重新编译生成新的文件，hash就会变化。