我使用webpack进行构建，使用webpack-dev-server（npm run watch）时没有任何问题，但当我尝试创建生产构建（npm run build）时，当我尝试加载网站时，控制台中似乎出现了错误，屏幕上什么都没有显示。
未捕获错误：[HMR]热模块更换被禁用。
我对此有几个问题：
-
我对使用
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()
]
};
您需要启用HMR插件。将HotModuleReplacementPlugin添加到您的webpack.config中的插件数组中。您可以有一个单独的webpackconfig用于开发和生产。
类似的东西
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()
]
在生产构建中包含热加载位不是一个特别好的主意。它们在那里实际上毫无用处，只会使你的文件大小膨胀。
关于如何应对这种情况，有多种策略。有些人将他们的webpack配置按文件分开，然后通过--config指向它。我更喜欢通过npm维护单个文件和分支。我使用webpackmerge在分支之间共享配置（免责声明：我是作者）。
我得到这个错误是因为我在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
您需要启用热模块更换功能才能使其工作，例如：
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",