webpack HMR热更新 不使用webpack-dev-server

不想用webpack-dev-server（想自己学着配置一下），就这么简单

【涉及版本】：

• webpack4 （4.44.1）

【问题】：

• 编译更新了，但页面不会自动刷新，查了下解决办法，附上

【包解释】
【chokidar】：监听文件变化并刷新页面

// 用于执行webpack的app.js
// 引入chokidar
const chokidar = require('chokidar');
// webpack()
  var webpack = require('webpack'),
      webpackDevMiddleware = require('webpack-dev-middleware'),
      webpackHotMiddleware = require('webpack-hot-middleware'),
      webpackDevConfig = require('./build/webpack.config');
      
  var compiler = webpack(webpackDevConfig);
  
  const devMiddleWare = webpackDevMiddleware(compiler, {
    publicPath: webpackDevConfig.output.publicPath,
    noInfo: true,
    hot: true,
    // 这里强制将html文件写入（需要为编译后的html文件设置模板引擎）
    writeToDisk: (filename) => {
      return /\.html$/.test(filename)
    },
    stats: {
      colors: true
    }
  })
  const hotMiddleware = webpackHotMiddleware(compiler)
  app.use(devMiddleWare)
  app.use(hotMiddleware);
  // 以下开始监听目标文件/dist/index.html的变动，watcher.on('change',...)时候触发更新
  app.active = ()=>{
    const watcher = chokidar.watch([
        path.resolve(__dirname, '/dist/index.html'),
    ]);
    watcher.on('ready', function() {
        console.log('Initial scan complete. Ready for changes');
    });
    watcher.on('change', function(path) {
        console.log('File [' + path + '] changed !');
        // 重点!!  reload the client on file changes
        hotMiddleware.publish({action: 'reload'});
    });
  }

  app.active()
  
  // ------------------------- webpack.config.js文件 -----------------------------

const HotMiddleWareConfig = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000';
// 入口文件处增加
  entry:{
    main: [HotMiddleWareConfig, resolve('src/main.js')],
  },
// plugins中增加一项
  plugins:[
    new webpack.HotModuleReplacementPlugin(),
  ]
  

结束，希望帮助到大家