I am trying to use Webpack to live reload both my client side and server side code. The config I have at the moment will rebuild the files automatically when i run the webpack-dev-server
command. But nothing updates in the browser, even when I manually refresh it, same content on the screen
var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function(x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function(mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
module.exports = {
entry: [ './server/server.js', './client/app.js'],
target: 'node',
output: {
path: path.join(__dirname, 'build'),
filename: '[name].js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel'
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
externals: nodeModules,
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
There is a runtime API embedded in your environment for HMR that you have to interact with. At a minimum, you need to add the following somewhere in your entrypoint script:
if (module.hot) {
module.hot.accept()
}
Have a look at the code sample provided in the new documentation to get a better idea.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.