当我尝试更改我的React组件并保存以查看热加载器是否更新了我的页面时,开发者工具会显示以下内容:
GET http://localhost:3000/public/bundle/76566a1ad7e45b834d4e.hot-update.json 404 (Not Found)hotDownloadManifest @ main.js:26hotCheck @ main.js:210check @ main.js:9288(anonymous function) @ main.js:9346
main.js:9303 [HMR] Cannot find update. Need to do a full reload!
main.js:9304 [HMR] (Probably because of restarting the webpack-dev-server)
我不确定为什么会发生这种情况。我正在尝试将Django作为我的后端服务器 (webpack指南) 运行。
这是我的webpack.watch.js文件:
var path = require('path');
var config = require("./webpack.config.js");
var Webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var port = process.env.WEBPACK_PORT || 3000;
var host = process.env.HOST || 'localhost';
config.entry.unshift(
"webpack-dev-server/client?http://" + host + ":" + port,
"webpack/hot/only-dev-server" // only prevents reload on syntax errors
);
config.plugins = [
new Webpack.HotModuleReplacementPlugin(),
new Webpack.NoErrorsPlugin(), // don't reload if there is an error
new ExtractTextPlugin("style.css", {
allChunks: true
})
];
config.module.loaders = [
{ test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.jsx$/, loaders: ['react-hot', 'babel-loader'], include: path.join(__dirname, 'app') },
{ test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
{ test: /\.scss$/, exclude: /node_modules/, loaders: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader') }
];
config.devServer = {
publicPath: config.output.publicPath,
filename: 'main.js',
contentBase: './public',
hot: true,
// Make connection between webpack-dev-server and its runtime set inline: true
inline: true,
lazy: false,
quiet: true,
noInfo: true,
headers: {"Access-Control-Allow-Origin": "*"},
stats: {colors: true},
// webpack-dev-server will serve built/bundled static files from host:port
host: "0.0.0.0",
port: port
};
module.exports = config;
这是我的webpack.config.js文件:
module.exports = {
entry: [
'./app/index.js'
],
output: {
path: './public/bundle',
filename: 'main.js',
publicPath: 'http://localhost:3000/public/bundle/'
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
],
module: {
loaders: [
{ test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.jsx$/, loaders: ['react-hot', 'babel-loader'], include: path.join(__dirname, 'app') },
{ test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
{ test: /\.scss$/, exclude: /node_modules/, loaders: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader') }
]
},
}
webpack-hot-middleware
添加到入口中:entry: { index: ['./app/index.js', 'webpack-hot-middleware/client'] }
。 - Bob Sponge