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

时间:2016-04-10 09:14:28

标签: javascript node.js webpack hot-module-replacement

我正在使用webpack进行构建,使用webpack-dev-servernpm run watch)时没有任何问题,但是当我尝试创建生成版本时npm run build当我尝试加载网站时,我似乎在控制台中收到错误,屏幕上根本没有显示任何内容。

  

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

我对此有几个问题:

  1. 我对使用Hot Module Replacement的理解是,它的设计目的是为了在开发过程中简化生活,不应该在生产部署中使用它。这是对的吗?

  2. 鉴于以下情况,为什么使用Hot Module Replacement?我不知道是什么驱使它。

  3. 生产构建的最佳实践是什么,我应该为prod和dev分别设置webpack配置吗?理想情况下,我想纯粹使用单个配置来简化维护。

  4. 的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()
        ]
    };
    

4 个答案:

答案 0 :(得分:7)

您需要启用HMR插件。将HotModuleReplacementPlugin添加到webpack.config中的plugins数组中。您可以为开发和生产提供单独的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()
]

答案 1 :(得分:3)

我收到此错误的原因是我在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

答案 2 :(得分:1)

在生产版本中包含热加载位并不是一个特别好的主意。它们在那里实际上没用,只是膨胀你的文件大小。

有多种策略可以解决这个问题。有些人将每个文件的webpack配置分开,然后通过--config指向它。我更喜欢维护单个文件并通过npm分支。我使用webpack-merge在分支之间共享配置(免责声明:我是作者)。

答案 3 :(得分:0)

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

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",