插件系統(tǒng)是 Webpack 靈活性所在,Loaders做不到的暇韧,便可以在這里使用 Webpack API 豐富你的開發(fā)過程鹉动。
你可以貢獻自己的 Plugins浑厚,開發(fā)一個插件也不算困難摹闽,Webpack將臨時文件放在內(nèi)存里蹄咖,甚至于存在一個大對象(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();
})
}
當(dāng)然我勸你還是先看看社區(qū)貢獻了哪些蚜迅。
處理 JavaScript
UglifyjsWebpackPlugin
使用UglifyJS丑化項目中的代碼,Webpack@3已內(nèi)置這個插件
BabiliWebapckPlugin
基于Babel的剪裁工具
ComponentWebpackPlugin
通過Webpack配置組件
處理 HTML
HtmlWebpackPlugin
簡單創(chuàng)建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