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