webpack常用的plugin

案例代码以"webpack": "3.10.0","uglifyjs-webpack-plugin": "^1.3.0",为主

1.UglifyJsPlugin

webpack内置UglifyJsPlugin，压缩和混淆代码

new UglifyJsPlugin({
            parallel: 4,
            uglifyOptions: {
                output: {
                comments: false,
                beautify: false,
                },
                compress: {
                warnings: false
                },
            },
            cache: true,
        }),   //压缩代码

2.CommonsChunkPlugin

webpack内置CommonsChunkPlugin，提高打包效率，将第三方库和业务代码分开打包。

new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: "js/vendor.js",
            children: true,
            minChunks: Infinity,
        }),

3.ProvidePlugin

ProvidePlugin：自动加载模块，代替require和import

   new webpack.ProvidePlugin({     //自动加载模块
            '$': "jquery",
            'jQuery': "jquery",
            'window.jQuery': "jquery",
            'window.$': 'jquery'
        }),

4.html-webpack-plugin

html-webpack-plugin可以根据模板自动生成html代码，并自动引用css和js文件

new HtmlWebpackPlugin({
            template: 'src/index.html',
        }),

5.extract-text-webpack-plugin

extract-text-webpack-plugin 将js文件中引用的样式单独抽离成css文件，防止将样式打包在js中引起页面样式加载错乱的现象

  new ExtractTextPlugin({
            filename:"css/index.css",
            allChunks:false,

        }), 

6.DefinePlugin

DefinePlugin 编译时配置全局变量，这对开发模式和发布模式的构建允许不同的行为非常有用。

7.HotModuleReplacementPlugin

HotModuleReplacementPlugin 热更新

8.optimize-css-assets-webpack-plugin

optimize-css-assets-webpack-plugin 不同组件中重复的css可以快速去重

9.compression-webpack-plugin

compression-webpack-plugin 生产环境可采用gzip压缩JS和CSS

         new CompressionPlugin({    //打包文件为giz格式
             filename: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串
             algorithm: 'gzip',//算法
             test: new RegExp('\\.(js|css)$'),
             threshold: 10240,//只处理比这个值大的资源。按字节计算
             minRatio: 0.8//只有压缩率比这个值小的资源才会被处理
            })

10.happypack

happypack：通过多进程模型，来加速代码构建

11.CleanWebpackPlugin

重构之前删除dist文件，除dist/img文件

new CleanWebpackPlugin({   
            cleanOnceBeforeBuildPatterns:['**/*', '!img', '!img/**']
        }),