前言
相信大家在使用webpack的時候，總是不知道如何下手，對于不同的場景，總是找不到合適的webpack的插件，本系列按照github的star數量排序，整理了很多插件，建議收藏，以后用得到! 本文先介紹部分高star插件，后面會持續更新，
top1:Webpack Bundle Analyzer ?14.4K
地址
使用互動式可縮放樹圖可視化 webpack 輸出檔案的大小，
top2：HTML Webpack Plugin ?11.3k
地址
簡化創建 HTML 檔案以服務于您的包的插件
top3: prerender-spa-plugin ?9.8k
地址
這個插件的目標是提供一個簡單的預渲染解決方案，該解決方案易于擴展并可用于任何站點或使用 webpack 構建的單頁應用程式，
1 Purgecss ? 6,436
鏈接
PugeCSS 是一個洗掉未使用的 CSS 的工具，它可以是您開發作業流程的一部分，
當你在建一個網站時，你可能會決定使用一個 CSS 框架，比如 TailwindCSS、Bootstrap、MaterializeCSS、Foundation 等等……但是你只會使用一小部分框架，并且會包含很多未使用的 CSS 樣式.
這就是 PurgeCSS 發揮作用的地方，PurgeCSS 分析您的內容和 CSS 檔案，然后它將檔案中使用的選擇器與內容檔案中的選擇器相匹配，它從您的 CSS 中洗掉未使用的選擇器，從而生成更小的 CSS 檔案，
2 Offline Plugin ? 4,427
地址
該插件旨在為webpack專案提供離線體驗，它使用ServiceWorker和AppCache作為引擎蓋下的后備，只需將此插件包含在您webpack.config的 .cpp 檔案中，并在您的客戶端腳本中包含隨附的運行時，您的專案將通過快取所有（或部分）webpack 輸出資產來準備離線，
3. Mini Css Extract Plugin ? 4,331
地址
這個插件將 CSS 提取到單獨的檔案中，它為每個包含 CSS 的 JS 檔案創建一個 CSS 檔案，它支持按需加載 CSS 和 SourceMaps
4 Extract Text Webpack Plugin ? 4,076
地址
從一個或多個包中提取文本到一個單獨的檔案中，
5 Critters ? 2,754
地址
一個 Webpack 插件，用于行內關鍵 CSS 并延遲加載其余 CSS，
6 Copy Webpack Plugin ? 2,654
地址
將已存在的單個檔案或整個目錄復制到構建目錄，
7 Hard Source Webpack Plugin ? 2,589
地址
HardSourceWebpackPlugin是 webpack 的插件，為模塊提供中間快取步驟，
8 React Refresh Webpack Plugin ? 2,287
地址
用于為 React 組件啟用“快速重繪”（也稱為熱多載）
9 Preload Webpack Plugin ? 2,174
地址
用于使用<link rel='preload'>. 這有助于延遲加載，
10 Page Skeleton Webpack Plugin ? 2,153
地址
Page Skeleton 是一款 webpack 插件，該插件的目的是根據你專案中不同的路由頁面生成相應的骨架屏頁面，并將骨架屏頁面通過 webpack 打包到對應的靜態路由頁面中，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/307340.html
標籤：其他
上一篇：再見LayUI，向大神致敬！