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

我正在使用webpack为我的版本,使用webpack-dev-servernpm run watch )没有任何问题,但是当我尝试创build生产版本( npm run build )时,我似乎在控制台中得到错误我尝试加载网站,并没有显示在屏幕上。

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

我有几个关于这个问题:

  1. 我对使用Hot Module Replacement理解是,它devise用于在开发过程中使生活更轻松,不应该用于生产部署。 那是对的吗?

  2. 鉴于下面,为什么使用Hot Module Replacement ? 我不明白是什么驱动它。

  3. 生产版本的最佳做法是什么?我应该为prod和dev有单独的webpackconfiguration吗? 理想情况下,我想利用一个单一的configuration纯粹为了方便维护。

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

在生产版本中包含热载入位并不是一个好主意。 他们几乎没有用,只是膨胀你的文件大小。

如何处理这个问题有多种策略。 有些人将每个文件的webpackconfiguration分开,然后通过--config指向它。 我宁愿维护一个文件,并通过npm分支。 我使用webpack-merge在分支之间共享configuration(免责声明:我是作者)。

您需要启用HMR插件。 在您的webpack.config中将HotModuleReplacementPlugin添加到您的插件数组中。 你可以有一个单独的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() ]