webpack插件配置及常用插件

webpack插件

用法

plugins: [
    new webpack.ProvidePlugin({}),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
]

有的插件是开发模式不用，到生产模式下才用,可如下设置

//PRODUCTION 指生产模式
PRODUCTION && Array.prototype.push.apply(config.plugins, [
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(true),
]);

分类

一直很疑惑，为什么有的插件是包装在webpack中的webpack.plugin，有的是裸奔的plugin，专门去官方关注了一下这个问题，终于搞清楚了

内置模块（built-in）

官方解释如下

翻译一下，通过webpack配置的属性包含在你模块中的插件，再简单易懂点，就是webpack自己的，所有权问题，嘿嘿。。。

new webpack.ProvidePlugin({})

其他模块 (not-built-in)

非内置，通过npm或其他方法发布的

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

常用插件

config 配置类

ProvidePlugin

用途：$出现，就会自动加载模块；$默认为'jquery'的exports

用法：

new webpack.ProvidePlugin({
  $: 'jquery',
})

DefinePlugin

用途：定义全局常量

用法：

new webpack.DefinePlugin({
    'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
    },
    PRODUCTION: JSON.stringify(PRODUCTION),
    APP_CONFIG: JSON.stringify(appConfig[process.env.NODE_ENV]),
}),

IgnorePlugin

用途：忽略regExp匹配的模块

用法： new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

ExtractTextPlugin

用途：分离css文件

用法： new ExtractTextPlugin(PRODUCTION ? '[name]-[chunkhash].css' : '[name].css')

HtmlWebpackPlugin

用途：重构入口html，动态添加<link>和<script>，在以hash命名的文件上非常有用，因为每次编译都会改变

用法：

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

optimize 优化类

UglifyJsPlugin

用途：js压缩

用法： new webpack.optimize.UglifyJsPlugin()

OccurrenceOrderPlugin

用途：排序输出

通过模块调用次数给模块分配ids，常用的ids就会分配更短的id，使ids可预测，减小文件大小，推荐使用

用法： new webpack.optimize.OccurrenceOrderPlugin(true)

CommonsChunkPlugin

用途：合并公共模块为单独文件，比如全局通用的js等，长期不会修改的，从而可以从缓存中取，优化网页性能

用法：

new webpack.optimize.CommonsChunkPlugin({
    names: ['vendor']
})

webpack1迁移到webpack2过渡专用

LoaderOptionsPlugin

用途：webpack1到webpack2迁移过渡专用，就像名字说的那样，loader选项插件，对于暂时不支持loader的options的属性，使用此插件

用法：如下，为vue 配置postcss

new webpack.LoaderOptionsPlugin({
    vue: {
        // use custom postcss plugins
        postcss: function(webpack) {
            return [              
                require('postcss-mixins'),
            ];
        }
    }
}),

参考链接

webpack官方

webpack-using-plugins