webpack經常使用插件

 https://www.jianshu.com/p/08859e5651fccss

 

1、html-webpack-plugin

插件的基本做用就是生成html文件。html

html-webpack-plugin的一個實例生成一個html文件,若是單頁應用中須要多個頁面入口,或者多頁應用時配置多個html時,那麼就須要實例化該插件屢次;webpack

、extract-text-webpack-plugin

該插件會提取entry chunk中全部的require('*.css'),分離出獨立的css文件。web

 

5、clean-webpack-plugin

用於在building以前刪除你之前build過的文件,清楚dist中重複的文件異步

 

CommonsChunkPlugin    new webpack.optimize.CommonsChunkPlugin(options)

提取代碼中的公共模塊,而後將公共模塊打包到一個獨立的文件中,以便在其餘的入口和模塊中使用。別忘了在html中單獨引入抽離出來的公共模塊。ui

常見的使用場景:插件

  1. 抽離多個entry的公共模塊
  2. 抽離vendor模塊
  3. 抽離子模塊中的公共模塊到父模塊中,會增長首屏加載的時間
  4. 和3相似,不過不是抽離到父模塊,並且額外抽離出一個異步的公共模塊

HotModuleReplacementPlugin

模塊熱替換,若是不在dev-server模式下,須要記錄數據,recordPath,生成每一個模塊的熱更新模塊。code

 

UglifyJsPlugin

壓縮jsserver

相關文章
相關標籤/搜索