你好,有一个问题:在一个有 React 的网站上,每个页面都有自己的 Entry Bundle File,绑定了几个 entry-ID,bundle 是通过 Webpack 收集的。我想启用“热重载”
...
var buildPath = __dirname + '/public/js/bundles';
module.exports = {
context: path.join(__dirname, '/resources/scripts'),
devtool: process.env.NODE_ENV === 'production' ? null : 'inline-source-map',
entry: {
...entries...
campaigns: [
'webpack/hot/only-dev-server',
'webpack-dev-server/client?http://localhost:8080',
'./appjs/campaigns/campaignsEntry.js',
]
},
output: {
path: buildPath,
publicPath: 'http://localhost:8080/',
filename: process.env.NODE_ENV === 'production' ? '[name]-bundle-[chunkhash].js' : '[name]-bundle.js'
},
devServer: {
hot: true,
contentBase: buildPath,
publicPath: 'http://localhost:8080',
port: 8080,
headers: { "Access-Control-Allow-Origin": "*" },
lazy: false,
stats: { colors: true }
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015-loose', 'react'],
plugins: ['transform-object-rest-spread', 'transform-class-properties']
}
}
]
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),
new webpack.optimize.OccurrenceOrderPlugin(),
]
};
if (process.env.NODE_ENV === 'production') {
...
} else {
module.exports.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin()
);
}
1)页面与服务器有连接
2)服务器监控更新并创建一个新的Bundle
3)但它不是在本地创建的,而是“虚拟地”创建的(据我正确理解说明)
4)服务器通知客户端新的Bundle和Hash
5)客户端试图获取该地址的Bundle,但是会收到如下错误raven.js:1074 GET http://localhost:8080/004e386432676c218bd0.hot-update.json 404 (Not Found)
6) 一件奇怪的事情——在控制台中它给出了两次(据我所知,在正常操作期间它应该只有 1 次)2 raven.js:80 [WDS] App updated. Recompiling...
7) 如果我转到该地址,http://localhost:8080/WebpackServer 会在项目文件夹(public/... - PHP Laravel 上的服务器)中提供由 Webpack“收集器”在本地制作的所有捆绑包的列表,WebpackServer 不会输入new Bundle with a hash 在那里,但也没有把它给这个地址
8) 网页包 --version=2.4.1
问题:我做错了什么?
谢谢!