html常用插件安装,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，动态添加和

用法：

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'),

];

}

}

}),

参考链接