I'm running into an issue with webpack-dev-server and the react-hot loader. Occasionally a full page reload is required when the changes can't be hot loaded (e.g. when editing a non-react component). Since the dev server keeps all new changes in memory and doesn't write them to disk, doing a full reload loads the latest full build. Every time this happens I have to kill the dev server, do a full build, and then reload the page.
I'm wondering if I've got something misconfigured - is the dev server supposed to serve up the latest bundle from memory, even after a full reload? If not, does anyone have a creative workaround to this issue?
Here are my webpack bundle and server configs:
var webpack = {
bundle: {
resolve: {
alias: vendor.scripts.src.paths
},
entry: {
app: [
'webpack-dev-server/client?http://localhost:3001',
'webpack/hot/only-dev-server',
app.scripts.src
],
vendor: vendor.scripts.src.names
},
output: {
path: buildDirs.js,
filename: app.scripts.bundle
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor', vendor.scripts.bundle),
new webpack.optimize.DedupePlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
react: 'React'
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-gb/),
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
include: srcRoot,
loaders: ['react-hot', 'babel?stage=0']
}
]
},
watch: true,
devtool: 'cheap-module-source-map',
progress: true
},
server: {
contentBase: buildRoot,
hot: true,
historyApiFallback: true
}
};