webpack文件监听的原理？

原理：

采用轮询的方式，每隔一段时间去判断每个文件的最后修改时间是否发生变化，如果发生变化，就先缓存起来，等待延时时间结束，期间如果遇到别的文件更改都统一缓存，然后一起重新打包

实现方式：

• 利用了nodejs文件系统模块，fs.watch方法

如何开启监听模式呢？ 有两种方式：

• 1、启动 webpack 命令时，带上 --watch 参数
• 2、在配置 webpack.config.js 中设置 watch:true

文件监听功能只能用于开发环境，在生产环境中不应启用它，因为它会增加额外的开销，降低构建的效率

js

module.export = {
    // 默认false,也就是不开启 【webpack-dev-server 和 webpack-dev-middleware 里 Watch 模式默认开启的】
    watch: true,
    // 只有开启监听模式时，watchOptions才有意义
    watchOptions: {
        // 默认为空，不监听的文件或者文件夹，支持正则匹配
        ignored: /node_modules/,
        // 监听到变化发生后会等300ms再去执行，默认300ms
        aggregateTimeout:300,
        // 判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的，poll指的是每次轮询间隔的时间
        poll:1000
    }
}

优化文件监听

Webpack 默认使用文件系统的监听来检测文件的变化，这种方式在开发环境中可能会导致性能问题，特别是在监听大量文件时。

一种常用的优化方法是使用轮询的方式来检测文件的变化，而不是使用文件系统的监听。可以使用 watch-poll 来实现这种方式。

js

watchOptions: {
    poll: true,
    ignored: /node_modules/
}

• 这样，webpack 就会使用轮询的方式来监听文件变化，并且会忽略 node_modules 目录中的文件。这样会大大减少文件监听数量，提高编译性能。