未捕获的错误：[HMR] 热模块更换已禁用

Posted 2023-03-15

【中文标题】未捕获的错误：[HMR] 热模块更换已禁用

【英文标题】：Uncaught Error: [HMR] Hot Module Replacement is disabled

【发布时间】：2016-07-31 09:21:21

【问题描述】：

我将webpack 用于我的构建，使用webpack-dev-server (npm run watch) 没有任何问题，但是当我尝试创建生产构建(npm run build) 时，我似乎得到了错误当我尝试加载网站时控制台并没有显示任何内容。

。

我对此有几个问题：

我对使用Hot Module Replacement 的理解是，它旨在让开发过程中的生活更轻松，不应在生产部署中使用它。对吗？

鉴于以下情况，为什么使用Hot Module Replacement？我看不出是什么驱动了它。

关于生产构建的最佳实践是什么，我是否应该为 prod 和 dev 分别设置 webpack 配置？理想情况下，我想使用单一配置来简化维护。

package.json

  // ...
  "scripts": 
    "build": "webpack --progress --colors --production",
    "watch": "webpack-dev-server --inline --hot --progress --colors"
  ,
  "dependencies": 
    "bootstrap": "^3.3.6",
    "bootstrap-sass": "^3.3.6",
    "bootstrap-webpack": "0.0.5",
    "extract-text-webpack-plugin": "^1.0.1",
    "html-webpack-plugin": "^2.15.0",
    "jquery": "^2.2.3",
    "node-sass": "^3.4.2",
    "react": "^15.0.1",
    "react-bootstrap": "^0.28.5",
    "react-dom": "^15.0.1",
    "react-redux": "^4.4.1",
    "react-router": "^2.0.1",
    "react-router-redux": "^4.0.1",
    "redux": "^3.3.1",
    "redux-thunk": "^2.0.1",
    "webpack": "^1.12.14"
  ,
  "devDependencies": 
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "css-loader": "^0.23.1",
    "exports-loader": "^0.6.3",
    "file-loader": "^0.8.5",
    "imports-loader": "^0.6.5",
    "less": "^2.6.1",
    "less-loader": "^2.2.3",
    "redux-devtools": "^3.2.0",
    "redux-logger": "^2.6.1",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack-dev-server": "^1.14.1"
  

webpack.config.js

var webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = 
    entry: [
        'webpack/hot/only-dev-server',
        path.resolve(__dirname, 'app/index.js')
    ],
    output: 
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    ,
    module: 
        loaders: [
             test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query:  presets: [ 'es2015', 'react' ]  ,
             test: /\.scss$/, loader: 'style!css!sass?includePaths[]=' + path.resolve(__dirname, './node_modules/bootstrap-sass/assets/stylesheets/') ,
             test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file' 
        ]
    ,
    resolve: 
        modulesDirectories: ['node_modules']
    ,
    plugins: [
        new webpack.NoErrorsPlugin(),
        new htmlWebpackPlugin(
            filename: 'index.html',
            template: './index.html',
            inject: false
        ),
        new webpack.ProvidePlugin(
            $: "jquery",
            jQuery: "jquery"
        ),
        new webpack.optimize.OccurenceOrderPlugin()
    ]
;

【参考方案1】：

您需要启用热模块更换功能才能使其正常工作，例如：

webpack.config.js

module.exports = 
  //...
  devServer: 
    hot: true
  ,
  plugins: [
    //...
    new webpack.HotModuleReplacementPlugin()
  ]

;

来自 webpack： Note that webpack.HotModuleReplacementPlugin is required to fully enable HMR. If webpack or webpack-dev-server are launched with the --hot option, this plugin will be added automatically, so you may not need to add this to your webpack.config.js. See the HMR concepts page for more information.

如前所述，否则您可以通过 package.json 添加 --hot 到您的脚本中启用它，例如

"start": "webpack-dev-server --hot",

【参考方案2】：

我收到此错误是因为我在 webpack.config.js 中有这样的代码。

devServer: 
    ...
    hot: true,
    inline: true

改为使用命令webpack-dev-server --hot --inline，然后我不必用new webpack.HotModuleReplacementPlugin() 膨胀我的配置。

https://github.com/webpack/webpack/issues/1151#issuecomment-111972680

【参考方案3】：

您需要启用 HMR 插件。将 HotModuleReplacementPlugin 添加到 webpack.config 中的插件数组。你可以有一个单独的 webpack.config 用于开发和生产。

有点像

 plugins: [
    new webpack.NoErrorsPlugin(),
    new htmlWebpackPlugin(
        filename: 'index.html',
        template: './index.html',
        inject: false
    ),
    new webpack.ProvidePlugin(
        $: "jquery",
        jQuery: "jquery"
    ),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
]

【参考方案4】：

在生产版本中包含热加载位并不是一个特别好的主意。它们在那里几乎毫无用处，只会让你的文件变大。

关于如何处理这个问题有多种策略。有些人将他们的 webpack 配置按文件分开，然后通过--config 指向它。我更喜欢通过 npm 维护单个文件和分支。我使用webpack-merge 在分支之间共享配置（免责声明：我是作者）。

【讨论】：

感谢您提供此信息 - webpack-merge 看起来非常有用，但我不清楚目前实际触发 HMR 包含在我的构建中的原因是什么，因此将这个组件分离出来是很棘手的 - 任何基于以上的想法？

您已将webpack/hot/only-dev-server 包含到您的entry 配置中。这带来了 HMR 的客户端组件。

啊完美 - 完全忽略了这一点！谢谢！

没有问题。我看到您在--inline 模式下使用 webpack-dev-server，因此即使在开发使用期间，您甚至可以跳过该入口点。