icyrock.com
HomeJavascript experiments - hot-module-replacement
2017-Aug-01 22:49
Webpack supports hot module replacement (HMR). It can be used to provide HMR to a server-side application very easily.
Our application is very simple:
1 2 3 | exports.run = function () { console.log( 'App now running' ) } |
The server that will run it:
1 2 3 4 5 6 7 8 9 10 11 | const runner = function () { const app = require( './app' ) app.run() } runner() module.hot.accept( './app.js' , function () { console.log( 'app.js module replacement accepted' ) runner() }) |
Webpack configuration with HMR and server start enabled:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | const webpack = require( 'webpack' ) const nodeExternals = require( 'webpack-node-externals' ) const StartServerPlugin = require( 'start-server-webpack-plugin' ) module.exports = { context: __dirname + '/src' , entry: [ 'webpack/hot/poll?1000' , './server' , ], externals: [ nodeExternals({ whitelist: [ 'webpack/hot/signal' , 'webpack/hot/poll?1000' ] }) ], output: { path: __dirname + '/dist' , filename: 'bundle.js' }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), new webpack.NoEmitOnErrorsPlugin(), new StartServerPlugin({ name: 'bundle.js' }) ], target: 'node' , } |
Here are the packages needed in package.json:
1 2 3 4 5 6 7 8 9 10 11 | { ... "devDependencies" : { "start-server-webpack-plugin" : "^2.2.0" , "webpack" : "^3.4.1" , "webpack-hot-middleware" : "^2.18.2" , "webpack-node-externals" : "^1.6.0" , "webpack-shell-plugin" : "^0.5.0" }, ... } |
Sample invocation, with changing the log line in app.js by appending 'yay!':
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | $ webpack --watch Webpack is watching the files… Hash: 1f64b51e4ded543ed195 Version: webpack 3.4.1 Time: 174ms Asset Size Chunks Chunk Names bundle.js 30.3 kB 0 [emitted] main [./app.js] ./app.js 61 bytes {0} [built] [./server.js] ./server.js 193 bytes {0} [built] [0] multi webpack/hot/poll?1000 ./server 40 bytes {0} [built] + 3 hidden modules App now running Hash: 0f743dbc4801ddd0993e Version: webpack 3.4.1 Time: 28ms Asset Size Chunks Chunk Names bundle.js 30.3 kB 0 [emitted] main 0.1f64b51e4ded543ed195.hot-update.js 171 bytes 0 [emitted] main 1f64b51e4ded543ed195.hot-update.json 43 bytes [emitted] [./app.js] ./app.js 66 bytes {0} [built] + 5 hidden modules app.js module replacement accepted App now running yay! [HMR] Updated modules: [HMR] - ./app.js [HMR] Update applied. ^C $ |