webpack HRM_刘诗能💨💨的专栏文章_微信文章

webpack的HMR

Hot Module Replacement（以下简称 HMR）是 webpack 发展至今引入的最令人兴奋的特性之一，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。(注意不是浏览器刷新)。

webpack-dev-server实现自动刷新

我们只需要在webpack.config.js里配置好devServe即可实现自动刷新，但并不是HMR，如下：

devServer: {
    // 服务器根目录
    contentBase: path.join(__dirname, "./src"),
    port: 3000,
    //会把打包后的资源输入到服务器根目录 + publicPath
    publicPath: "/",
  },
复制代码

webpack-dev-server实现热更新原理(HMR)

下面我们以 react 为例子，大概讲述一下如何实现HMR, 首先我们理解一下他实现的原理，如图：

1.webpack监听到文件的变化，进行新的编译和打包，并且以简单的js对象保存在内存中。

2.webpack与devServer进行交互，告诉webpack要保存代码到内存中。

3.devServer对文件的监控，并且通过配置来告诉devServer是刷新还是进行热更新。

4.devServer通过sock.js和浏览器建立websock长链接，把webpack编译代码各阶段信息告诉浏览器(包括更新模块的hash)，就是通过这一个hash来进行更新的。

5.webpack通过devServer的配置和传递给他的信息（也就是第二部监听的信息）来决定是否进行浏览器刷新或者热更新。

6.webpack的HotModuleReplacement通过JsonpMainTemplate.runtime 向 server 端发送 Ajax 请求，服务端返回一个 json，该 json 包含了所有要更新的模块的hash值，获取到更新列表后，该模块再次通过jsonp请求，获取到最新的模块代码。这就是上图中 7、8、9 步骤。

10.HotModulePlugin将会对新旧模块进行对比，决定是否更新模块，在决定更新模块后，检查模块之间的依赖关系，更新模块的同时更新模块间的依赖引用。

11.当 HMR 失败后，回退到 live reload 操作，刷新浏览器。

实现热更新具体配置(HMR)

webpack.config.js配置如下：

  devServer: {
    // 服务器根目录
    contentBase: path.join(__dirname, "./src"),
    port: 3000,
    //会把打包后的资源输入到服务器根目录 + publicPath
    publicPath: "/",
    inline: true,
    hot: true,
  },
  plugins: [
    ...
    new webpack.HotModuleReplacementPlugin(),
  ]
复制代码

入口文件配置

如果已经通过 HotModuleReplacementPlugin 启用了模块热替换(Hot Module Replacement)，则它的接口将被暴露在module.hot属性下面。通常，用户先要检查这个接口是否可访问，然后再开始使用它。 ——引自webpack官网

if (module.hot) {
  module.hot.accept(() => {
    ReactDom.render(
        <App />,
        document.getElementById('root')
    )
  })
}
ReactDOM.render(<App />, document.getElementById("root"));
复制代码

由于热更新并不会保存react的state状态，所以我们必须引用一个loader，react-hot-loader。

webpack.config.js配置

rules: [
    ...
    {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/env"],
          plugins: ["react-hot-loader/babel"] //增加
        }
    },
]
复制代码

entry: [
    'react-hot-loader/patch', //添加
    "./src/index.js",
  ],
复制代码

入口文件

if (module.hot) {
  module.hot.accept(() => {
    ReactDom.render(
      <AppContainer>
        <App />
      </AppContainer>,
        document.getElementById('root')
    )
  })
}
ReactDOM.render(<App />, document.getElementById("root"));
复制代码

##小结 webpack的HMR就到此为止啦，参考文章： zhuanlan.zhihu.com/p/30669007