webpack 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,
    }));