前言
相信大家在使用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 打包到对应的静态路由页面中。