21 / 07 / 17

『webpack』基础篇 - 文件监听

文件监听是在发现源码发生变化时,自动重新构建出新的输出文件。

webpack开启监听模式,有两种方式:

  • 启动webpack命令时,带上--watch参数

    唯一缺陷:每次需要手动刷新浏览器

    { "name": "my-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "watch": "webpack --watch" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { } }
  • 在配置webpack.config.js中设置watch:true

文件监听的原理分析

轮训判断文件的最后编译时间是否变化

某个文件发生了变化,并不会立刻告诉监听者,而是先缓存起来,等aggregateTimeout

module.exports = { // 默认false,也就是不开启 watch: true, // 只有开启监听模式,watchOptions才有意义 watchOptions: { // 默认为空,不监听的文件或者文件夹,支持正则匹配 ignored: /node_modules/, // 监听到变化后会等300ms再去执行,默认300ms aggregateTimeout: 300, // 判断文件是否发生变化,是通过不停询问系统指定文件有没有变化实现的,默认每秒问1000次 poll: 1000 }, entry: './src/index.js', output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js' }, mode: 'production' }