插件系统是 Webpack 灵活性所在,Loaders做不到的,便可以在这里使用 Webpack API 丰富你的开发过程。
你可以贡献自己的 Plugins,开发一个插件也不算困难,Webpack将临时文件放在内存里,甚至于存在一个大对象(complication)里面,所以不管是谁写插件,直接拿出来读写就行了。
export default function newWebpackPlugin(){
//this is what you do while call this
}
newWebpackPlugin.prototype.apply=(compiler)=>{
compiler.plugin('run', (compiler, cb)=>{
console.log('holy, you have a new webpack plugin')
cb();
})
}
当然我劝你还是先看看社区贡献了哪些。
处理 JavaScript
UglifyjsWebpackPlugin
使用UglifyJS丑化项目中的代码,Webpack@3已内置这个插件
BabiliWebapckPlugin
基于Babel的剪裁工具
ComponentWebpackPlugin
通过Webpack配置组件
处理 HTML
HtmlWebpackPlugin
简单创建HTML文件,作为程序的入口
常用配置项:
处理 CSS
ExtractTextWebpackPlugin
从bundle中提取文本(CSS)到单独的文件中
常用配置项:
处理 Webpack chunks
CommonChunkPlugin
提取chunks之间的共享的通用模块
常用配置项:
- name(names): string | Array
- minChunk: number [2,Infinity) | fn
- chunk: string | Array
AggressiveSplittingPlugin
将原来的chunk分成更小的chunk
常用配置项:
HotModuleReplacementPlugin
启用模块热替换(HMR)
BannerPlugin
在每个生成的chunk顶部添加banner