#yyds干货盘点#这13个webpack插件,让你的项目起飞

​ 前言 相信大家在使用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 地址 用于使用. 这有助于延迟加载。 10 Page Skeleton Webpack Plugin ⭐ 2,153 地址Page Skeleton 是一款 webpack 插件,该插件的目的是根据你项目中不同的路由页面生成相应的骨架屏页面,并将骨架屏页面通过 webpack 打包到对应的静态路由页面中。

尚美源码教程库提供精美的网站源码教程,小程序、公众号、H5、APP、游戏、直播、支付、区块链、商城、影音、小说等源码信息大全。
用户必须遵守《计算机软件保护条例(2013修订)》第十七条:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。鉴于此条例,用户从本平台下载的全部源码(软件)教程仅限学习研究,未经版权归属者授权不得商用,若因商用引起的版权纠纷,一切责任均由使用者自行承担,本平台所属公司及其雇员不承担任何法律责任。
尚美源码教程库 » #yyds干货盘点#这13个webpack插件,让你的项目起飞
赞助VIP 享更多特权,立即登录下载海量资源
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡