webpack-hot-middleware自动刷新

安装

npm install --save-dev webpack-hot-middleware

使用

1. Add the following plugins to the plugins array in your webpack configuration file,here webpack.config.js:

   plugins: [
       // OccurenceOrderPlugin is needed for webpack 1.x only
       new webpack.optimize.OccurenceOrderPlugin(),
       new webpack.HotModuleReplacementPlugin(),
       // Use NoErrorsPlugin for webpack 1.x
       new webpack.NoEmitOnErrorsPlugin()
   ]
   

webpack配置文件中添加3个插件

2. Add 'webpack-hot-middleware/client' into the entry array.
   // webpack.config.js

module.exports = [
    {
        name: 'mobile',
        entry: {
            vendor: 'vendor.js',
            main: ['webpack-hot-middleware/client?name=mobile', 'mobile.js']
        }
    },
    {
        name: 'desktop',
        entry: {
            vendor: 'vendor.js',
            main: ['webpack-hot-middleware/client?name=desktop', 'desktop.js']
        }
    }
]

Webpack配置文件中修改入口

3. add the middleware into your server:

   var webpack = require('webpack');
   var webpackConfig = require('./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));