详解webpack的文件监听实现(热更新)

{
 // ...
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "watch": "webpack --watch" // 新增配置
 }
 // ...
}

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

{
 // ...
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "dev": "webpack-dev-server --open" // 新增配置，运行 npm run dev 会自动打开浏览器
 }
 // ...
}

'use strict'
 
const path = require('path');
var webpack = require('webpack'); // 引进 webpack
module.exports = {
 // ...
 mode:'development', // production 改为开发环境，因为只有开发环境才用到热更新
 module:{
 // ...
 },
  plugins:[
   new webpack.HotModuleReplacementPlugin()
  ],
  devServer:{
   contentBase:'./dist',
   hot: true
  }
}