webpack Hot Module Replacement Use with webpack-dev-middleware

Example

1. Install webpack-dev-middleware via npm

   npm i -D webpack-dev-middleware webpack-hot-middleware
   

2. Modify webpack.config.js

   • Add webpack-hot-middleware/client to each items defined in "entry"

   • Add new webpack.HotModuleReplacementPlugin() to "plugins"

     module.exports = {
         entry: {
             js: [
                 './index.js',
                 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true'
             ]
         },
         plugins: [
             new webpack.HotModuleReplacementPlugin()
         ]
     };
     

3. Add these to index.js

   var webpack = require('webpack');
   var webpackDevMiddleware = require('webpack-dev-middleware');
   var webpackHotMiddleware = require('webpack-hot-middleware');
   
   var config = require('./webpack.config.js');
   var compiler = webpack(config);
   
   app.use(webpackDevMiddleware(compiler, {
       noInfo: true,
       publicPath: config.output.publicPath,
       stats: { colors: true },
       watchOptions: {
           aggregateTimeout: 300,
           poll: true
       },
   }));
   
   app.use(webpackHotMiddleware(compiler, {
       log: console.log,
   }));