这13个webpack插件，让你的项目起飞

Posted 2021-10-27 前端picker

前言

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