强大的 Webpack

精选的 webpack 资源、库、工具和应用程序列表。它受到 awesome 列表的启发。欢迎您通过贡献来改进此列表。

Webpack 生态系统

支持 Webpack

• Webpack Open Collective - 帮助支持团队的持续开发工作。

社区

• StackOverflow
• Medium
• Gitter 聊天

Twitter

对 Webpack 热衷的人（无特定顺序）

• Sean T. Larkin - @TheLarkInn Microsoft 的 TPM。开发者倡导者和 webpack 核心团队成员。
• Juho Vepsäläinen - @bebraw 来自 SurviveJS 和 webpack 核心团队成员。
• Eric Clemmons - @ericclemmons HigherEdHQ 的软件开发副总裁。Webpack 成员。
• Patrick Stapleton - @gdi2290 来自 AngularClass，AngularAir 和 Angular Universal。Webpack 成员。
• Kent C. Dodds - @kentcdodds 来自 PayPal 工程 和 JavaScript Air。Webpack 成员。
• Johannes Ewald - @Jhnnns: Webpack 核心团队成员。
• Joshua Wiens - @d3viant0ne: EasyMetrics 的技术主管。Webpack 成员。
• Jonathan Creamer - @jcreamer898: Microsoft MVP 和 Telerik 开发者专家。
• Kees Kluskens - @keeskluskens: - Code Yellow 的软件工程师，Webpack 核心团队成员。

库

加载器

文件类型

• HTML 加载器: Webpack 的 HTML 加载器模块。-- 维护者: Webpack 团队
• 响应式加载器: 响应式图像的加载器。-- 维护者: Jeremy Stucki
• SVG URL 加载器: 将 SVG 文件加载为 utf-8 编码的 URL 的加载器。-- 维护者: Hovhannes Babayan
• mermaid 加载器: Webpack 的 mermaid 加载器模块（图表）。-- 维护者: Paul Musso
• wasm 加载器: Webpack 的 wasm 二进制加载器模块。-- 维护者: Arthur Buldauskas
• Imagemin 加载器/插件: Webpack 的图像最小化加载器 + 插件。-- 维护者: itgalaxy inc.
• Bin Exec 加载器: 将任何文件通过任何二进制文件管道传输。-- 维护者: Rafael Milewski
• GraphQL 加载器: .graphql 文档加载器。-- 维护者: Stephen Wan

组件和模板

• Angular2 模板加载器: 将 html 和样式内联到 Angular2 组件中。-- 维护者: Sean Larkin
• Handlebars 加载器: Webpack 的 handlebars 模板加载器。-- 维护者: Paul Carduner
• Vue Loader: 用于 Vue.js 组件的 Webpack 加载器。 -- 维护者: Vuejs 团队
• SVG React Loader - Webpack SVG 到 React 组件加载器。 -- 维护者: Jerry Hamlet
• Underscore Loader - Underscore 和 Lodash 模板加载器。 -- 维护者: Emmanuel Antico
• ngTemplate Loader - Angular1 模板加载器。 -- 维护者: Toby Rahilly
• ngInlineStylesLoader: 优化 Angular 组件的内联 CSS。 -- 维护者: Severin Friede
• Markup-inline Loader 将 SVG 内联到 HTML 中 -- 维护者: Zhicheng Wang
• Polymer Loader - 用于 Polymer 元素的加载器。 -- 维护者: Rob Dodson - Chad Killingsworth - Bryan Coulter
• Tag Loader - 用于 Riot 标签文件的加载器。 -- 维护者: Riot 团队
• Twig Loader - Twig 模板加载器。 -- 维护者: Zimmo.be 团队
• Auto ngTemplate Loader: 自动检测 Angular 1 模板并加载它们。 -- 维护者: Yash Kulshrestha
• Pug Loader - Pug 模板加载器（以前称为 Jade）。 -- 维护者: Pug 团队
• Simple Nunjucks Loader - Nunjucks 模板加载器。 -- 维护者: ogonkov

样式

• Style Loader: 用于 Webpack 的样式加载器模块。 -- 维护者: Webpack 团队
• PostCSS Loader: 用于 Webpack 的 PostCSS 加载器。-- 维护者: PostCSS 团队
• CSS Loader: 用于 Webpack 的 CSS 加载器模块。-- 维护者: Webpack 团队
• SASS Loader: 用于 Webpack 的 SASS 加载器。-- 维护者: Jorik Tangelder
• Less Loader: 用于 Webpack 的 Less 加载器模块。-- 维护者: Webpack 团队
• Stylus Loader: 用于 Webpack 的 Stylus 加载器。-- 维护者: Kyle Robinson Young
• Isomorphic Style Loader: 用于 Webpack 的同构 CSS 样式加载器。-- 维护者: Kriasoft 团队
• Minify CSS-in-JS Loader: 基于正则表达式的 Webpack CSS-in-JS 压缩加载器，无需 babel。-- 维护者: Zack Young
• SASS Resources Loader: 全局导入 SASS 资源（变量、mixin 等）。-- 维护者: ShakaCode

语言与框架

• TS Loader: 用于 webpack 的 TypeScript 加载器。 -- 维护者: TypeStrong 团队
• Coffee Loader: 用于 Webpack 的 Coffee 加载器模块。 -- 维护者: Webpack 团队
• Bootstrap Loader: 在 Webpack 包中加载 Bootstrap 样式。 -- 维护者: ShakaCode 团队
• PostHTML Loader: 用于 Webpack 的 PostHTML 加载器。 -- 维护者: PostHTML 团队
• ELM Loader: 用于 Elm 编程语言的 Webpack 加载器。 -- 维护者: Richard Feldman
• Fengari Loader: 使用 Fengari 运行 Lua 代码。 -- 维护者: Daurnimator

实用工具

• Babel Loader: 用于 Babel 的 Webpack 插件。 -- 维护者: Babel 团队
• Worker Loader: 用于 Webpack 的 Worker 加载器模块。 -- 维护者: Webpack 团队
• Resolve URL Loader: 解析 url() 语句中的相对路径。 -- 维护者: Ben Holloway
• Import Loader: 用于 Webpack 的 Imports 加载器模块。 -- 维护者: Webpack 团队
• SourceMap Loader: 从模块中提取 sourceMappingURL 注释。 -- 维护者: Webpack 团队
• Combine Loader - 将加载器数组转换为单个加载器字符串。 -- 维护者: James Friend
• Icon Font Loader - 将 SVG 转换为 CSS 中的字体图标。 -- 维护者: Forrest R. Zhao
• Icons Loader - 从 SVG 依赖项生成图标字体。 -- 维护者: Mike Vercoelen
• Modernizr Loader - 使用 webpack 捆绑你的 modernizr 构建。 -- 维护者: Peerigon 开发者
• ngRouter Loader - 使用 Angular 路由器进行 AOT 兼容的 NgModule 延迟加载 -- 维护者: Shlomi Assaf
• Lingui Loader - 为 jsLingui（i18n 库）动态编译消息目录 -- 维护者: Tomáš Ehrlich
• Shell Loader - 在源文件上运行任意 shell 脚本。 -- 维护者: Jo Sprague
• EXIF 加载器 - 在构建时从您的 JPG 中提取 EXIF 和 IPTC 数据。 -- 维护者: Emanuel Kluge
• esbuild 加载器 - 由 esbuild 提供支持，是 babel-loader、ts-loader 和 Terser 的超快替代方案。 -- 维护者: Hiroki Osame

测试

• Karma Webpack: 使用 Karma 与 Webpack。 -- 维护者: Webpack 团队
• Istanbul Webpack 插件: 使用 Istanbul 代码覆盖率工具对整个打包进行代码覆盖率分析。 -- 维护者: Hagai Cohen

集成库

• Dotenv Webpack: 通过 dotenv 将环境变量编译到您的包中。 -- 维护者: Matthew Steele
• Terse Webpack - 使用流畅 API 和预设简化 Webpack。 -- 维护者: Eric Clemmons
• SystemJS Webpack - 为 SystemJS 提供 Webpack 打包功能。 -- 维护者: Guy Bedford
• Gulp Webpack 流 - 通过流接口运行 webpack。 -- 维护者: Kyle Robinson Young
• Webpack Blocks - 使用功能性特征块配置 webpack。-- 维护者: Andy Wermke
• Webpacker - 用于集成到 Ruby on Rails 项目中的官方 webpack gem。-- 维护者: Rails
• WebpackAspnetMiddleware - ASP.NET 5 的开发中间件。-- 维护者: Frank Wallis
• Consul Key/Value Webpack: 通过 Consul KV 存储 将环境变量编译到您的捆绑包中。-- 维护者: Marlon Maxwel

Webpack 插件

• DefinePlugin: 创建可以在编译时配置的全局常量。-- 维护者: Webpack 团队
• Compression Plugin: 准备资产以使用 Content-Encoding 提供服务。-- 维护者: Webpack 团队
• Offline Plugin: Webpack 的离线插件（ServiceWorker、AppCache）。-- 维护者: Arthur Stolyar
• Rewire Plugin: Webpack 捆绑包的依赖注入。-- 维护者: Johannes Ewald
• HTML Webpack Plugin: 简化 HTML 文件的创建。-- 维护者: Jan Nicklas
• Copy Webpack Plugin: 在 webpack 中复制文件和目录。-- 维护者: Len Boyette
• 按路径拆分: 按路径拆分 Webpack 插件。 -- 维护者: Bohdan Tkachenko
• SW 预缓存 - 生成一个服务工作者来预缓存捆绑包。 -- 维护者: Will Farley
• CoreJS 插件 - 将 Core-JS 作为 Webpack 插件。 -- 维护者: PatrickJS
• 捆绑包分析器 - 将捆绑包表示为交互式树状图的实用程序。 -- 维护者: Yuriy Grunin
• 模块映射 - 将模块映射到不同的文件。 -- 维护者: Spartez 团队
• 无服务器 Webpack - 无服务器插件，用于捆绑您的 Lambda 函数。 -- 维护者: Elastic Coders
• 预渲染 SPA - 针对 SPA 的框架无关静态站点生成。 -- 维护者: Chris Fritz
• 静态站点生成器插件 - 最小、无意见的静态站点生成器。 -- 维护者: Mark Dalgleish
• SVG 雪碧插件 - 用于 SVG 雪碧和图标的插件。 -- 维护者: Jeremy Tice (TodayTix)
• Imagemin Webpack 插件 - 使用 Imagemin 压缩图像。 -- 维护者: Gregory Benner
• Prepack Webpack 插件 - 用于 prepack 的 Webpack 插件。 -- 维护者: Gajus Kuizinas
• 模块 CDN Webpack 插件 - 从 CDN 动态加载模块。 -- 维护者: Thomas Sileghem
• 生成 package.json 插件 - 将部署 package.json 中的依赖项限制为捆绑包实际使用的依赖项。 -- 维护者: Paul Myburgh
• 渐进式 Web 应用清单 - PWA 清单管理器和生成器。 -- 维护者: Arthur A. Bergamaschi
• 文件管理器 Webpack 插件 - 在 Webpack 构建之前和之后复制、移动、删除文件和目录 -- 维护者: Gregory Nowakowski
• Fork TS 检查器 Webpack 插件 - 在单独的进程中运行 typescript 类型检查器的 Webpack 插件。 -- 维护者: TypeStrong 团队
• 重复包检查器 Webpack 插件 - 当捆绑包中存在多个版本的相同包时，会发出警告 -- 维护者: Darren Scerri
• 循环依赖插件 - 在捆绑时检测具有循环依赖的模块 -- 维护者: Aaron Ackerman
• webpack-inject-plugin - 一个 webpack 插件，用于将代码动态注入捆绑包。 -- 维护者: Adam Dierkens
• 公共路径操作插件 - 在运行时控制动态加载资源的publicPath -- 维护者: Andrew Goldis
• 构建通知插件 - 为构建错误和警告显示操作系统级别的通知。 -- 维护者: Rocco Cataldo
• CSS清理Webpack插件 - 用于删除重复和未使用的css规则的插件 -- 维护者: Dominik Weber
• 扩展重载器 - 在开发浏览器扩展时进行热重载 -- 维护者: Rubens P. G. Cavalcante
• Htmls Webpack插件: 用于Webpack的简单快速的多html生成插件。 -- 维护者: Zack Young
• Mini css 提取插件: 轻量级CSS提取插件 -- 维护者: Webpack Contrib
• build-hash-webpack-plugin 对于每次构建，Webpack都会生成一个内存中的哈希值，以便知道两个构建输出是否相同。 此插件将描述的构建哈希值写入单独的json文件中。 -- 维护者: Réda Housni Alaoui
• webpack-hook-plugin - 在Webpack构建之前或之后运行任何shell命令 -- 维护者: David Kwon
• 动态供应商Webpack插件 - 提供了一种使用动态变量和特定代码拆分导入供应商的方法。 -- 维护者 Lilian Saget-Lethias
• 定义变量Webpack插件 - DefinePlugin的增强，用于将定义的内容存储在实际变量中。 -- 维护者 Lilian Saget-Lethias
• Shell 脚本 Webpack 插件 - 一个在触发 编译器钩子 时运行任意 shell 脚本的插件。 -- 维护者 Drew Loomer
• Stylelint Webpack 插件: 一个用于 webpack 的 Stylelint 插件。 -- 维护者: Ricardo Gobbo de Souza
• ESLint Webpack 插件: 一个用于 webpack 的 ESLint 插件。 -- 维护者: Ricardo Gobbo de Souza
• 排除资产 Webpack 插件: 一个根据路径正则表达式模式从 webpack 输出中排除资产的插件。 -- 维护者: Klayton Faria
• Webpack Shell 插件 Next: 一个允许您在 webpack 构建之前或之后运行任何 shell 命令的插件。 -- 维护者: Kuzmin Pavel
• Gettext Webpack 插件: 使用 gettext 将本地化嵌入到您的捆绑包中。 -- 维护者: Juan Luis Paz
• Node Polyfill 插件: 为 Node.js 核心模块提供垫片。 -- 维护者: Richie Bendall
• Bytenode 插件: 使用 bytenode 将 JavaScript 编译成字节码。 -- 维护者: Herbert Treis Neto
• Chrome 扩展存档 Webpack 插件 创建存档文件以将 Chrome 扩展发布到 Chrome 网上应用店 -- 维护者: KeisukeYamashita
• Layer-pack Webpack 插件 允许对导入文件和目录进行 glob 匹配，通过可继承的源代码/npm 包构建单仓库应用程序，并共享 webpack 配置 -- 维护者: Braun Nathanaël
• webpack-typescript-directory-compile-plugin 配置一个 TypeScript 文件的源目录和一个 JavaScript 文件的输出目录。源目录中的每个 TypeScript 文件以及任何新添加的文件都将被编译成单独的 JavaScript 文件。 -- 维护者: Stephen Sigwart
• CycloneDX Webpack 插件: 在编译时从 webpack 包中创建 CycloneDX 软件物料清单 (SBOM)。 -- 维护者: OWASP CycloneDX 团队
• Transpile Webpack 插件: 将输入文件单独转译成输出文件，而不会捆绑在一起。 -- 维护者: Chungen Li
• 清单提取插件: 在编译 webpack 后生成一个资产清单。 -- 维护者: Andrew Powell

Webpack 工具

• Webpack 开发中间件: 中间件，它提供一个实时捆绑包。 -- 维护者: Webpack 团队
• Webpack 开发服务器: 提供一个 webpack 应用程序。在更改时更新浏览器。 -- 维护者: Webpack 团队
• Webpack 合并 - 为 Webpack 设计的合并。 -- 维护者: Juho Vepsäläinen
• NPM 安装 Webpack - 使用 Webpack 自动安装和保存依赖项。 -- 维护者: Eric Clemmons
• Webpack 验证器 - 使用 Joi 验证您的 webpack 配置。 -- 维护者: js-dxtools 团队
• Webpack 配置工具 - 工具，使您的 webpack 配置更易于阅读。 -- 维护者: Kent C. Dodds
• Angular2 Webpack 工具包 - 用于 Angular 2 的 Webpack 工具和助手。 -- 维护者: AngularClass
• Webpack 包分析器 - 将包表示为交互式树状图。 -- 维护者: Yuriy Grunin
• HJS Webpack: 用于使用热加载设置 webpack 的助手/预设。 -- 维护者: Henrik Joreteg
• Webpack 仪表盘: Webpack 开发服务器的 CLI 仪表盘。 -- 维护者: Formidable Labs
• Neutrino: 将 Webpack 的强大功能与预设的简单性相结合。 -- 维护者: Eli Perelman
• 速度测量插件 - 测量 webpack 插件和加载器的速度。 -- 维护者: Stephen Cook
• 时间分析插件 - 分析 webpack 中加载器和插件的时间成本。速度测量插件的继任者 -- 维护者: 宋高
• packtracker.io - 在每次提交时分析 Webpack 包，将 Webpack 统计信息报告到每个拉取请求。
• BundleStats: 分析 Webpack 统计信息（包大小、资产、模块、包）并比较不同构建之间的结果。 -- 维护者: Vio
• Webpack Landing Generator: 创建转化率高的着陆页的简便方法。 -- 维护者: Aliaksei Kuncevic
• Webpack Dev Server Firewall: 防止从未知 IP 访问开发服务器。 -- 维护者: Igor Adamenko
• RelativeCI: 在每次构建时运行深入的包分析，并监控 Webpack 包大小、资产、模块和包。

研究与培训

文章

• Aniketh Saha | 16-Oct-19 - 创建自定义 Webpack 插件
• Antoine Caron | 18-Jan-19 - Webpack：一段意外的旅程
• Mark Erikson | 07-Mar-17 - 使用 Webpack 声明式地渲染地球 3D，构建 Cesium + React 应用程序
• Joseph Zimmerman | 2-Feb-17 - Webpack 的详细介绍。
• Jamund Ferguson | 22-Jul-16 - 手动调整 Webpack 构建。
• Sean T. Larkin | 21-Jul-16 - 使用 Chrome 开发者工具学习和调试 Webpack！。
• Raja Rao DV | 10-Apr-16 - Webpack — 令人困惑的部分。
• Andrew Ray | 2016年4月9日 - Webpack：何时使用以及原因。
• Jonathan Creamer | 2016年2月25日 - 使用 ES6 和 Babel 6 进行 WebPack 代码拆分。
• Ilya Zayats | 2016年2月7日 - 如何使用 Webpack 按路由拆分应用程序。
• Sebastian De Deyne | 2016年2月4日 - 与 Webpack 一起冒险。
• Jonathan Creamer | 2016年1月10日 - 高级 WebPack 第 2 部分 - 代码拆分。
• Andy Ccs | 2016年1月2日 - Webpack 和 Docker 用于开发和部署。
• Jonathan Creamer | 2016年6月8日 - 高级 WebPack 第 3 部分 - 创建自定义通知插件。
• Nader Dabit | 2015年9月7日 - Webpack 初学者指南。
• Jonathan Creamer | 2015年9月2日 - 高级 WebPack 第 1 部分 - CommonsChunk 插件。
• Maxime Fabre | 2015年10月16日 - 打包你的 Webpack。
• Hridayesh Sharma | 2020年8月18日 - 使用 Webpack 和 Babel 编写 JavaScript 库

视频

• Sean Larkin JS Kongress | 2019年4月2日 - 一切都是插件：从内部了解 webpack
• Colt Steele 通过 Youtube | 2019年3月7日 - 学习 Webpack 课程
• Naomi A. Jacobs 通过 BuzzJS 2.0 2017 | 2017年2月27日 - Webpack：它不是魔法
• Jack Franklin 在 HalfStack2016 | 2016年11月18日 | 使用 Webpack 实现无缝的客户端 JavaScript
• Sean Larkin NEJS Conf | 2016年9月30日 | Webpack：核心概念
• 前端中心 Webpack 从基础开始 | 2016年8月22日 - Webpack 简介
• Eric Clemmons 与 Kent C. Dodds 聊天 | 2016年7月1日 - Webpack HMR。
• Mirko Nasato（5 部分系列）| 2016年6月7日 - 使用 Webpack 设置 Angular2 项目。
• Jonathan Creamer 在 Nodevember | 2015年12月5日 - 高级 WebPack。
• Kyle Robinson Young | 2015年7月8日 - Webpack 入门。
• Tasveer Singh 在 TorontoJS Tech Talk | 2015年4月9日 - Webpack。
• Jeremy Lund 在 Mountain West JS | 2015年3月28日 - 使用 Webpack 包装你的代码。

课程

• Webpack for Everyone - 由 Jeffrey Way 提供的免费 Laracasts 系列
• Webpack 基础 - 由 Sean Larkin 提供的关于 Webpack 基础的简要介绍。
• 使用 Webpack 提升 Web 性能 - 由 Sean Larkin 提供的关于使用 Webpack 解决常见 Web 性能问题的课程。
• Webpack 入门 (播放列表) - 由 Kent C. Dodds 在 Egghead.io 上制作的几个视频的播放列表（第一个视频是免费的）。
• Angular 和 Webpack 用于模块化应用程序 - 由 Kent C. Dodds 在 Egghead.io 上制作的课程。
• 使用 Webpack 开发生产环境 JavaScript 应用程序 - 由 Kent C. Dodds 在 Egghead.io 上制作的课程（高级）。
• Webpack 基础 - 由 Joe Eames 为 Pluralsight 制作的课程（中级）。
• Webpack 学院 - 一个全面的 Webpack 学习资源。
• 从零开始学习 Webpack - 由 Paris Nakita Kejser 在 YouTube 上制作的系列视频。

书籍

• SurviveJS - Webpack: 一本免费的书籍，从 Webpack 初学者到大师的指南。涵盖开发、生产和高级主题。

Webpack 示例

• Webpack 示例: 常见 Webpack 功能的示例。

社区示例

Angular

• Angular2 Webpack 启动器 - 由 AngularClass 提供的基于 Webpack 的 Angular 2 启动套件。
• Angular2 Webpack - 由 Preboot 提供的完整且简单的 Angular 2 启动器，使用 Webpack。
• Angular2 Webpack Visual Studio - 由 Damien Bod 提供的 ASP.NET Core、Angular2 与 Webpack 和 Visual Studio。
• Angular2 启动器 - 由 Brian Schemp 提供的带有 Typescript 和 Webpack 的 Angular2 启动套件。
• Angular2 Seed - 由 Pawel Kozlowski 提供的简单启动器，演示了 Angular2 的基本概念。

框架无关

• ES6 TodoMVC with Webpack - 用于教授 webpack 的仓库。（查看分支）。来自 Kent C. Dodds。

React

• Create React App - 来自 Dan Abramov，无需构建配置即可创建 React 应用程序。
• React Starter Kit - 来自 Kriasoft 团队 的同构 Web 应用程序样板。
• React Redux Universal - 来自 Erik Rasmussen 的通用 Web 应用程序入门样板。
• Frontend Boilerplate - 来自 TJ Holowaychuk 的大部分不应该存在的样板。
• ReactGo - 来自 Ken Ding 的全栈通用 Redux 一站式解决方案。
• React Native Calculator - 来自 Benoit Vallon 的使用相同代码的移动、桌面和网站应用程序。
• React Cordova Boilerplate - 来自 Yuval Saraf 的 React 与 Cordova 的 TodoMVC 示例。
• React Universally - 一个入门套件，为您提供生产就绪的通用 React 应用程序的最低要求。
• Razzle Material-UI Styled Example - 来自 Erik Engi 的使用 Express 和压缩的 Styled Components。
• Read - 来自 logustra 的高度可扩展的 React 样板。
• @route-resource-preload/webpack-plugin - 来自 Devin Deng 的专注于提高应用程序首屏加载速度并提供最佳用户体验，灵感来自 NextJS 的预加载。

Vue

• Vuad - 来自 logustra 的高度可扩展的 Vue 样板。

其他

• Juho, Johannes, Tobias & Sean on JavaScript Air - JavaScript Air 播客
• Webpack 面试问题 - 面试问题及答案。
• Webpack 可视化配置工具 - 一个在浏览器中创建 Webpack 配置的可视化工具