webpack打包，常用插件

1、progress-bar-webpack-plugin(项目启动或者打包进度条插件)

  安装 npm i -D progress-bar-webpack-plugin 

使用 

new ProgressBarPlugin({

    complete: '.',  //

    width: 50, 

    format: 'build [:bar] ' + chalk.green.bold(':percent') + '(:elapsed seconds)',

    clear: false

}) 

2、js优化

cnpm add webpack-parallel-uglify-plugin -D
const WebpackParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
plugins: [
new WebpackParallelUglifyPlugin({
      uglifyJS: {
        output: {
          beautify: false, //不需要格式化
          comments: false //不保留注释
        },
        compress: {
          warnings: false, // 在UglifyJs删除没有用到的代码时不输出警告
          drop_console: true, // 删除所有的 `console` 语句，可以兼容ie浏览器
          collapse_vars: true, // 内嵌定义了但是只用到一次的变量
          reduce_vars: true // 提取出出现多次但是没有定义成变量去引用的静态值
        }
      }
    })
]

3、解决打包慢的问题。

module: {
    rules: [{
        test: /\.(jsx|js)$/,
        loader: 'happypack/loader?id=happyBabel',
        exclude: /node_modules/
    },{...}]
}
plugins: [
    new HappyPack({
        id: 'happyBabel',
        threadPool: happyThreadPool,
        loaders: [{
            path: 'babel-loader',
            cache: true,
            query: {
                presets: ['react', 'es2017'],
                plugins: ['transform-object-rest-spread', "syntax-dynamic-import"] 
            }
        }]
    }),
    ...
]

4、使用redux-logger，实时监测redux的变化

 

npm i redux-logger --save-dev