Webpack中的文件监听 watch配置实时更新

目录

• Webpack中的文件监听
  • 1 watch参数 方式
  • 2 webpack配置方式开启watch

 

Webpack中的文件监听

文件监听是在发现源码变化时，就自动构建生成新的输出文件

开启文件监听有两种方式

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

1 watch参数 方式

配置script脚本
运行npm run watch即可
缺点是文件更新后会刷新浏览器

{
  "name": "02beginning",
  "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": {}
}

2 webpack配置方式开启watch

原理是轮询系统文件有无变化再去更新的，默认1秒钟轮询1000次

发现文件有变化时不会立即执行更新，而是会等待300ms, 300内如果别的文件也有变化会加载到更新列表中一起更新(思想类似于节流)

在把node_modules里面忽略后会有性能提升

webpack配置如下

'use strict';

const path = require('path');

module.exports = {
    // 开启监听
    watch:true,
    watchOptions:{
        // 设置不监听的文件或文件夹，默认为空
        ignored:/node_modules/,
        // 文件改变不会立即执行，而是会等待300ms之后再去执行
        aggregateTimeout:300,
        // 原理是轮询系统文件有无变化再去更新的，默认1秒钟轮询1000次
        poll:1000
    }
};