Webpack 本文针对热模块更换的哪些方面？

我正在学习网页，遇到了。 我大致了解什么是热模块更换（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' }

        ]
    }

}

我的问题是，您试图从哪个方面解释Web包热模块更换？在哪里可以使用该页面上提供的示例代码

简言之，我的问题是（到底）是关于什么的

热模块替换（HMR）是在应用程序运行时交换代码的功能。它允许您编辑代码，同时保留应用程序的状态。这对于样式设置尤其有用，因为您通常只想更新样式而不需要重新加载浏览器

但是，只有当代码提供特殊的钩子来删除以前的代码、撤消所有副作用并注入新代码时，这才是可能的。典型的副作用：注册事件侦听器、将数据存储在对象中、修改全局状态

例如，在应用程序运行时替换CSS是一项简单的任务，因为CSS对每个定义都没有副作用。为了理解HMR的内部结构，让我们来看看：

样式加载器附加处理HMR（我删除了一些对本例不重要的代码）：

if（模块热）{
//当样式更改时，更新标记
module.hot.accept（loaderUtils.stringifyRequest（此，！！remainingRequest），函数（）{
var newContent=require（loaderUtils.stringifyRequest（这个，！！remainingRequest））；
更新（新内容）；
});
//处置模块后，移除标签
module.hot.dispose（函数（）{
更新（）；
});
}

• 如果（module.hot）{

  检查HMR是否启用

• module.hot.accept（，handler）

  注册一个处理程序以注入新代码

• module.hot.dispose（处理程序）

  注册处理程序以处理旧代码

很难阅读，但它基本上只是将新样式表添加到

document.head

，并删除未使用的样式表

React中的HMR有点复杂，在过去的两个月里经历了一些严重的重构。但基本原则是每个导出的组件都封装在代理中。代理是一个与另一个对象类似的对象。这可以通过将所有函数转发到“真实”对象或使用（这显然要强大得多）。通过这种方式，可以轻松地交换出原始对象，而无需更新任何其他组件。我已经在中详细描述了这一点

---

为了使HMR发挥作用，需要满足以下要求：

• 您的代码需要

  module.hot.accept

  和

  module.hot.dispose

  的钩子来处理代码更新。这通常通过加载程序（例如，样式加载程序）或babel转换（例如，预设）来实现。从技术上讲，您也可以在每个模块中为自己编写这些挂钩…也许这是开始学习内部结构的一个好方法。如果更新的模块不包含此代码或无法处理更新，则更新将被拒绝，webpack将重新加载浏览器窗口。这可能看起来像HMR，但实际上只是一个浏览器挂钩埃弗雷什

• 客户端和服务器上需要一些基础设施来建立WebSocket连接，将新代码推送到客户端，并通知所有过时的模块来处理更新。实现这一点最简单的方法是将webpack dev server与

  webpack dev server--hot--inline

  一起使用。不需要其他代码。Esp特别是不要在

  webpack.config.js

  中添加HMR插件或任何webpack dev server内容–所有这些都将通过

  --hot--inline

  启用。有更多的方法来配置它–这实际上可能是需要的，具体取决于您的设置。这通常就是为什么这一部分对新手来说常常很混乱的原因

• Webpack需要在监视模式下运行，因为我们只希望处理更改的文件。当您使用

  Webpack dev服务器

  或

  Webpack dev中间件

  时，不需要向配置中添加任何内容，它已经将

---

我注意到

网页包开发服务器--hot--inline

，即使我省略了

--hot

，HMR仍然可以工作。你能帮我理解为什么吗？你的

网页包.config.js

中是否也应用了HMR插件。你应该添加插件并用

--hot

调用它