webpack部分插件介紹

在之前的react與webpack的搭配使用時介紹了webpack的基本使用及部分優化,而在實際的使用過程中還是遇到了一些其它問題,所以又把插件列表好好捋了一下,挑自己可能在日後工作用到的整理一下~可能有部分理解不到位,歡迎指正

  • 不知道有沒有小夥伴和我一樣,老是遇到webpack打包過程中出現abort trap:6,然後webpack服務就掛了的情況,查網上資料,說是堆棧的問題,可是這種堆棧問題實際上不會影響到代碼結果,因此你希望不要出現這種webpack服務突然掛了的狀態,此時你可以加入NoErrorsPlugin插件,該插件可以當遇到錯誤時跳過,不終止webpack進程~(the webpack process will not exit with an error code by enabling this plugin)
  • PrefetchPlugin,這個插件在網上的介紹資料很少,可是在我理解看來,該插件也可以起到一定的優化打包時間的效果,該插件的作用是當一個模塊還未被require之前,提前解析和建立一個對該插件的請求,其中兩個參數第一個是模塊的絕對路徑,第二個是對模塊的請求字符串,eg:new webpack.PrefetchPlugin(__dirname +”/node_modules”,”react/react.js”)
  • HotModuleReplacementPlugin,熱更新所需插件,實現模塊變動部分的替代而不重新刷新頁面,有效提高調試時間,但是該插件的使用並不僅僅在webpack.config.js中的plugins添加該插件即可,而是需要webpack-dev-server
    這裏寫圖片描述
    紅線所框內容的集體配合,當然,現在react-hot-loader已經被廢棄了。。。你也可以選擇最新的 React Hot Boilerplate, React transform Boilerplate等等~~
  • HtmlWebpackPlugin,可以爲你的web應用生成一個單獨的基礎html,支持模版,favicon等~,加速開發過程~
  • WebpackBrowserPlugin(我對這個很感興趣,正如對browser-sync調試一樣,它用到了browser-sync技術),它當你的webpack或webpack-dev-server 執行完全後,自動爲你的應用打開瀏覽器~
  • FaviconsWebpackPlugin,csdn的頁面中就有csdn專有的favicon~,而該插件則可以爲不同的設備自動生成超過30種的favicon(它們的來源都是同一張圖片)
  • DedupePlugin可在production環境下幫助刪除重複或相似文件,可以有效減少文件大小(用於打包文件優化,建議使用在生產環境)
  • OccurrenceOrderPlugin,根據出現次數爲每一個模塊或者chunk設置id,經常使用的模塊則會獲取到較短的id(和前綴樹類似),這可以使id可預測並有效減少文件大小,建議使用在生產環境中~
  • NpmInstallPlugin,這個並未在webpack官網的插件列表內提到過,但是個人認爲它通過自動幫助我們安裝依賴而提升了我們的開發效率,使用姿勢如下圖所示~,https://github.com/ericclemmons/npm-install-webpack-plugin,具體效果可以看下官網~

    plugins: [
      new NpmInstallPlugin({
        // Use --save or --save-dev
          dev: false,
        // Install missing peerDependencies
        peerDependencies: true,
      });
    ],
    
  • 這個不算是插件介紹,但可以輔助瞭解你的webpack打包性能,你可以在webpack-dev-server的server.js中設置你的timing爲true.這樣你可以清楚的知道你的打包時間~~從而進行你的 webpack打包時間比較

其它的插件暫且還沒有使用場景或在其它文章中介紹比較詳細便不再贅述(譬如dllplugin插件對打包性能提升很多),前者如果用了的話會再添加到博客~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章