我的问题是,无论我做什么,我都会在wepack_hmr
上得到一个404,我不能为我的生活找出原因可用。热模块替换启用,但不能正常工作http:// localhost:3000/__ webpack_hmr
完整的WebPack配置
var url = 'http://localhost:3000';
module.exports = {
resolve: {
extensions: ['', '.js']
},
entry: ['webpack-hot-middleware/client','./src/client/js/Kindred'],
devtool: 'cheap-module-source-map',
module: {
loaders:[
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {presets: ['es2015', 'react', 'react-hmre', 'stage-0']}
},
{test: /\.png$/, loader: "url-loader?limit=100000"},
// Images
{test: /\.jpg$/, loader: "file-loader"},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file?name=./font/[name].[ext]'
},
// Stylesheets
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style',
[
'css?sourceMap&modules&importLoaders=1',
'sass?sourceMap&modules',
]
) },
// Font Definitions
{ test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=public/font/[name].[ext]' },
{ test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=public/font/[name].[ext]' },
{ test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=public/font/[name].[ext]' },
{ test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=public/font/[name].[ext]' },
{ test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=public/font/[name].[ext]' }
]
},
sassLoader: {
includePaths: [ 'src/client/scss' ]
},
plugins: process.env.NODE_ENV === 'production' ? [
new ExtractTextPlugin ('app.css', {allChunks: true}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin()
] : [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin("style.css")
],
devServer: {
hot: true,
contentBase: './public'
},
output: {
path: path.join(__dirname),
publicPath: '/',
filename: 'bundle.js'
}
};
节点CMD运行
webpack-dev-server --inline --history-api-fallback --port 3000
当加载了页面
[HMR] Waiting for update signal from WDS...
home:1 GET http://localhost:3000/__webpack_hmr
client:22 [WDS] Hot Module Replacement enabled.
我花了它的运行,但它不是:/
Webpack hmr是一个棘手的恶魔得到正常工作。它是不够愉快的,我可以为你做。我建议你检查一个可用的反应样板包括它,并寻找你的配置之间的差异。https://github.com/gaearon/react-transform-boilerplate – John
哈哈欢呼约翰:)我感谢帮助和洞察,这可能会变得丑陋。 –
对不起,我通常喜欢帮助人们解决反应相关的问题,不介意在编写代码时跳跃,但webpack配置是最糟糕的..大声笑 – John