webpack_热更新

热更新

开启

  devServer: {
    // 开启 HMR 特性，如果资源不支持 HMR 会 fallback 到 live reloading
    hot: true
    // 只使用 HMR，不会 fallback 到 live reloading
    // hotOnly: true
  },
  plugins: [
    // …
    // HMR 特性所需要的插件
    new webpack.HotModuleReplacementPlugin()
  ]

原理

启动一个 websocket 监听文件 id 变化，执行除以 js，并重新执行

if (module.hot) {
  module.hot.accept("./number", function() {
    document.body.removeChild(document.getElementById("number"));
    number();
  });
}

热更新插件也就是通过对每个文件进行监听

常见问题

运行时错误

如果处理热替换的代码（处理函数）中有错误，结果也会导致自动刷新。导致无法看到错误日志，

解决办法：开启 hotonly

未开启 HMR

if (module.hot) {
  // 确保有 HMR API 对象
  module.hot.accept("./editor", () => {
    // …
  });
}