webpack - 本文针对模块热更换的哪个方面？

Question

我正在学习 Webpack 并遇到 this article .我对什么是热模块更换 (HMR) 有大致的了解。我可以通过以下示例代码配置 webpack HMR 插件:

var plugins = [ new webpack.HotModuleReplacementPlugin(), // using HMR plugin
            new HtmlWebpackPlugin({template: './index.html'})
        ]; 

module.exports = {
    // webpack config object
    context: entryBasePath,
    entry:{
        app: ['webpack/hot/dev-server', './bootstrap.js']
    },
    output: {
        path: outputBasePath,
        filename: './bundle.js',
        sourceMapFilename: '[file].map' // set source map output name rule
    },
    devtool: 'source-map', // enable source map
    plugins: plugins, 
    module: {
        loaders: [
            { test: /\.scss$/, loader: 'style!css!sass'}, 
            { test: /\.tpl$/,  loader: 'raw' }, 
            {
        test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url?limit=10000'
      },
      {
        test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
        loader: 'file'
      },
      { test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' }

        ]
    }

}

我的问题是this article的哪一方面？试图解释 Webpack 热模块替换？我在哪里可以使用该页面上提供的示例代码？

简而言之，我的问题是什么(到底)是this关于？

Answer 1

热模块替换 (HMR) 是一种在应用程序运行时换出代码的功能。它允许您在保留应用程序状态的同时编辑代码。这对于样式特别有用，您通常只想在不重新加载浏览器的情况下更新样式。

然而，这只有在代码提供特殊 Hook 以删除以前的代码、撤消所有副作用并注入(inject)新代码时才有可能。典型的副作用:注册事件监听器、将数据存储在对象中、修改全局状态。

例如，在应用程序运行时替换 CSS 是一项简单的任务，因为 CSS 根据定义是无副作用的。为了了解 HMR 的内部结构，让我们看一下 style-loader :

样式加载器附加 this special code处理 HMR(我删除了一些对这个例子不重要的代码):

if (module.hot) {
    // When the styles change, update the <style> tags
    module.hot.accept(loaderUtils.stringifyRequest(this, !!remainingRequest), function () {
        var newContent = require(loaderUtils.stringifyRequest(this, !!remainingRequest));
        update(newContent);
    });
    // When the module is disposed, remove the <style> tags
    module.hot.dispose(function () {
        update();
    });
}

• if (module.hot) {检查 HMR 是否启用
• module.hot.accept(<module identifier>, handler)注册处理程序以注入(inject)新代码
• module.hot.dispose(handler)注册处理程序以处理旧代码

update function很难阅读，但它基本上只是将新样式表添加到 document.head并删除未使用的样式表。

React 中的 HMR 有点复杂，并且在过去的几个月里经历了一些严重的重构。但基本原则是每个导出的组件都包装在代理中。代理是一个像另一个对象一样工作的对象。这可以通过将所有函数转发到“真实”对象或使用 ES2015 proxies 来实现。 (这显然更强大)。这样，可以轻松地换出原始对象而无需更新任何其他组件。我在 another SO answer 中对此进行了更详细的描述。 .

---

为了使 HMR 正常工作，需要满足一些要求:

• 您的代码需要 module.hot.accept 的钩子(Hook)和 module.hot.dispose处理代码更新。这通常是通过加载器(例如，style-loader)或 babel 转换(例如，babel-preset-react-hmre 预设)来实现的。从技术上讲，您也可以自己在每个模块中编写这些 Hook ……也许这是开始学习内部结构的好方法。如果更新的模块不包含此代码或无法处理更新，则更新将被拒绝并且 webpack 将重新加载浏览器窗口。这可能看起来像 HMR，但实际上只是浏览器刷新。

• 您需要客户端和服务器上的一些基础设施来建立 WebSockets 连接，将新代码推送到客户端并通知所有过时的模块处理更新。实现此目的的最简单方法是将 webpack-dev-server 与 webpack-dev-server --hot --inline 结合使用.不需要其他代码。特别是不要将 HMR 插件或任何 webpack-dev-server 东西添加到 webpack.config.js – 它将全部启用 --hot --inline .有更多方法可以配置它——根据您的设置，这可能实际上是必需的。这通常就是为什么这部分常常让新手感到困惑的原因。

• Webpack 需要以监视模式运行，因为我们只想处理更改的文件。使用 webpack-dev-server 时无需向配置添加任何内容或 webpack-dev-middleware , 它已经把 webpack compiler into watch-mode (当然，只有在 lazy: false 的情况下)。