webpack2.x-3.x热刷新配置webpack-dev-middleware

[jackieli123723]

webpack1.x--2.x

每次保存后输出有颜色的文件大小和改变

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  // quiet: true,
  stats: {
    colors: true,
    chunks: false
  }
})

不需的话注释stats如下配置即可

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true
})

webpack3.x

webpack3（不要显示每个打包模块）

var devMiddleware = require('webpack-dev-middleware')(compiler, {
    publicPath: webpackConfig.output.publicPath,
    stats: {
    // colors: true,
    // chunks: false

        colors: true,
        hash: false,
        timings: true,
        chunks: false,
        chunkModules: false,
        modules: false
  }
});

[jackieli123723]

常见额外配置

var webpack = require('webpack'),
    webpackDevMiddleware = require('webpack-dev-middleware'),
    webpackHotMiddleware = require('webpack-hot-middleware'),
    webpackDevConfig = require('./webpack.config.js');

var compiler = webpack(webpackDevConfig);

// attach to the compiler & the server
app.use(webpackDevMiddleware(compiler, {

    // public path should be the same with webpack config
    publicPath: webpackDevConfig.output.publicPath,
    noInfo: true,
    stats: {
        colors: true
    }
}));
app.use(webpackHotMiddleware(compiler));

----webpack3
    devServer: {
      hot: true,
      port: PORT,
      host: 'localhost',
      open: true,
      historyApiFallback: true,
      stats: {errors: true, errorDetails: true, warnings: false, chunks: false},
      publicPath: "/",
      contentBase: Path.resolve(__dirname, 'dist'),
      overlay: {warnings: true, errors: true},
      openPage: ''
    }

dist目录和静态资源删除

// https://github.com/shelljs/shelljs

var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
rm('-rf', assetsPath)
mkdir('-p', assetsPath)
cp('-R', 'static/*', assetsPath)

[jackieli123723]

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  //不需要stats开启注释
  // quiet: true,
  stats: {
    //webpack1.x-2.x
    // colors: true,
    // chunks: false

    //webpack3.x
        colors: true,
        hash: false,
        timings: true,
        chunks: false,
        chunkModules: false,
        modules: false
  }
})

[jackieli123723]

 //webpack.prod.conf.js增加
Hash: cdee8c3cbbf9c4eb4768
Version: webpack 1.15.0

    // keep module.id stable when vender modules does not change
        new webpack.HashedModuleIdsPlugin(),
        // enable scope hoisting
        new webpack.optimize.ModuleConcatenationPlugin(),
        // split vendor js into its own file
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest',
            chunks: ['vendor']
        }),