跳到主要内容

29-热替换模块(基本无用)

危险

永远不要在生产环境(production)下启用 HMR

在webpack3中启用热更新，使用webpack自带插件HotModuleReplacementPlugin这个插件就可以了。


const webpack = require("webpack");

module.exports = {
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
}

包含如下选项：

  • multiStep (boolean)：设置为 true 时，插件会分成两步构建文件。首先编译热加载 chunks，之后再编译剩余的通常的资源。
  • fullBuildTimeout (number)：当 multiStep 启用时，表示两步构建之间的延时。
  • requestTimeout (number)：下载 manifest 的延时（webpack 3.0.0 后的版本支持）。

这些选项属于实验性内容，因此以后可能会被弃用。就如同上文所说的那样，这些选项通常情况下都是没有必要设置的，仅仅是设置一下 new webpack.HotModuleReplacementPlugin() 在大部分情况下就足够了。

但这里说的热更新和我们平时写程序的热加载不是一回事，比如说我们Vue或者React中的热更新，并不是刷新整个页面，而是一个局部更新， 而这里的更新是重新刷新了页面。