webpack学习笔记(三)--文件监听

文件监听

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

webpack开启监听模式，有两种方式：

• 一、启动命令：package.json中添加watch:'webpack --watch'

  ...
    "scripts": {
        "watch": "webpack --watch"
    },
    ...
  复制代码

• 二、在webpack.config.js中设置

  module.exports = {
    entry:{...},
    output:{path:...,filename:...}
    watch:true,//默认false，不开启
    watchOptions:{
        ignored:/node-modules/,//忽略，默认为空
        aggregateTimeout:300,//默认300ms,监听文件发生变化等待300ms,再去执行
        poll:1000//轮询1s默认1000次
    }
  }
  复制代码

  复制代码

  原理：轮询监听文件的编辑时间，若是发生变化，将变化了的文件记录下来存储到磁盘中，等待aggregateTimeout时间以后，将记录下来的文件一块儿进行构建，构建到filename指定的文件中。

  复制代码

文件热更新 webpack-dev-server

输出的文件存储在内存中，因此会比watch快

配置以下：

• 一、安装 npm i webpack-dev-server -D
• 二、package.json中配置开发环境下的文件热更新,其中open是构建完成以后打开浏览器

{
    "scripts" : {
        "dev" : "webpack-dev-server --open"
    }
}
复制代码

• 三、webpack.config.js中添加HotModuleReplacementPlugin插件,该插件是webpack的内置插件，因此须要引入webpack ;
• 四、webpack.config.js中添加devServer的配置

const webpack = require('webpack')
  module.exports = {
      plugins : [
          new webpack.HotModuleReplacementPlugin()
      ],
      devServer : {
          contentBase: './dist', //指定目录
          hot : true //开启热更新
      }
  }
复制代码

热更新webpack-dev-middleware

示例源码