私はすべてのマニュアルを見ましたが、コード変更後のアプリはすべてのページを更新し、特定の変更をホットリロードしません。webpack.config:
export default {
debug: true,
devtool: 'cheap-module-eval-source-map',
entry: [
'./src/index',
'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true', //note that it reloads the page if hot module reloading fails.
],
target: 'web',
output: {
path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
externals: {
"$": "jQuery"
},
devServer: {
contentBase: './src'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
module: {
loaders: [
{test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
{test: /\.css/, loader: 'style-loader!css-loader!postcss-loader'},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
{test: /\.(png|jpg)$/, loader: 'url?limit=250000'}
]
},
postcss: function () {
return [precss, autoprefixer];
}
};
index.js
app.use(webpackDevMiddleware(compiler, {
noInfo: true,
hot:true,
publicPath: config.output.publicPath
}));
app.use(webpackHotMiddleware(compiler, {
log: console.log,
path: '/__webpack_hmr',
heartbeat: 10 * 1000,
}));
app.use('/static',express.static(path.join(__dirname, '../src')));
app.get('*', function(req, res) {
res.sendFile(path.join( __dirname, '../src/index.html'));
});
app.listen(port, function(err) {
if (err) {
console.log(err);
}
});