I am getting the following message in my browser's console when I change my javascript source:
[HMR] The following modules couldn't be hot updated: (Full reload needed) This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.
My question is how can I tell webpack to just auto reload the page when this happens?
Here is my server set up:
app.use(morgan('dev'));
// Disable views cache
app.set('view cache', false);
var webpack = require('webpack');
var webpackConfig = require('../client/webpack.config');
var compiler = webpack(webpackConfig);
app.use(require("webpack-dev-middleware")(compiler, {
noInfo: true, publicPath: webpackConfig.output.publicPath
}));
app.use(require("webpack-hot-middleware")(compiler));
and my webpack.config:
var path = require('path');
var AureliaWebpackPlugin = require('../node_modules/aurelia-webpack-plugin');
var webpack = require('../node_modules/webpack');
module.exports = {
entry: {
main: [
'webpack-hot-middleware/client',
'./client/src/main'
]
},
resolve: {
alias: {
breeze: 'breeze-client/build/breeze.debug',
resources: path.resolve( __dirname, 'src', 'resources'),
utils: path.resolve( __dirname, 'src', 'resources', 'utils', 'utils'),
tradestudyUtils: path.resolve( __dirname, 'src', 'resources', 'tradestudy-utils', 'tradestudy-utils')
}
},
output: {
path: path.join(__dirname, 'client'),
filename: 'bundle.js',
publicPath: '/'
},
devtool: 'eval',
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new AureliaWebpackPlugin()
],
module: {
//preLoaders: [
// {test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader'}
//],
loaders: [
{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] },
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015-loose', 'stage-1'], plugins: ['transform-decorators-legacy'] } },
{ test: /\.css?$/, loader: 'style!css' },
{ test: /\.html$/, loader: 'raw' },
{ test: /\.(png|gif|jpg)$/, loader: 'url-loader?limit=8192' },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff2' },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }
]
}
};
Thanks in advance?
Automagically refreshes your browser so that your code changes appears immediately webpack-dev-server is highly customizable, which is great if you fully grasp the product, but customizability is a huge stumbling block for most beginners. This article documents the most common pitfalls when setting up ‘live-reload’ on webpack-dev-server.
Upon code changes, webpack-dev-server generates the bundle file in-memory, so to enjoy ‘live-reload’, you need to ensure that your html page <script> tags are pointing to the in-memory bundle, which is served at url pointed to by publicPath output points to the directory and filename of the bundle generated when Webpack CLI is run.
An express-style development middleware for use with webpack bundles and allows for serving of the files emitted from webpack. This should be used for development only. Some of the benefits of using this middleware include: No files are written to disk, rather it handles files in memory
However, webpack-dev-server is not monitoring changes to your contentBase so it does not force a browser refresh. Setting watchContentBase to true in your Webpack configuration, will ‘fix’ this issue, but in the wrong way. When using webpack-dev-server, you should never have to run Webpack CLI to make ‘live-reload’ work.
You can pass parameter reload
to webpack-hot-middleware/client
:
entry: {
main: [
'webpack-hot-middleware/client?reload=true',
'./client/src/main'
]
},
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With