精选 webpack
一份精选的 webpack 优秀资源、库、工具和应用程序列表。灵感来源于 awesome 列表。欢迎通过贡献来改进此列表。
Webpack 生态系统
支持 Webpack
- Webpack Open Collective - 帮助支持团队持续的开发工作。
社区
热衷于 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 Engineering 和 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 Loader：Webpack 的 HTML 加载器模块。-- 维护者：
Webpack Team
- Responsive Loader：用于响应式图像的加载器。-- 维护者：
Jeremy Stucki - SVG Url Loader：将 SVG 文件加载为 utf-8 编码 URL 的加载器。-- 维护者：
Hovhannes Babayan - mermaid Loader：Webpack 的 mermaid 加载器模块（图表）。-- 维护者：
Paul Musso - wasm loader：Webpack 的 wasm 二进制加载器模块。-- 维护者：
Arthur Buldauskas - Imagemin Loader/Plugin：Webpack 的图像最小化加载器 + 插件。-- 维护者：
itgalaxy inc. - Bin Exec Loader：通过任何二进制文件处理任何文件。-- 维护者：
Rafael Milewski - GraphQL Loader：
.graphql文档加载器。-- 维护者：Stephen Wan
组件与模板
- Angular2 Template Loader：将 HTML 和样式内联到 Angular2 组件中。-- 维护者：
Sean Larkin 
- Handlebars Loader：Webpack 的 Handlebars 模板加载器。-- 维护者：
Paul Carduner - Vue Loader：Vue.js 组件的 Webpack 加载器。-- 维护者：
Vuejs Team - 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 Team - Twig Loader - Twig 模板加载器。-- 维护者：
Zimmo.be Team - Auto ngTemplate Loader：自动检测 Angular 1 模板并加载它们。-- 维护者：
Yash Kulshrestha - Pug Loader - Pug 模板加载器（以前是 Jade）。-- 维护者：
Pug Team - Simple Nunjucks Loader - Nunjucks 模板加载器。-- 维护者：
ogonkov - PWA Manifest Loader - PWA manifest 加载器。-- 维护者：
autopulated
样式
- Style Loader：Webpack 的样式加载器模块。-- 维护者：
Webpack Team - PostCSS Loader：Webpack 的 PostCSS 加载器。-- 维护者：
PostCSS Team - CSS Loader：Webpack 的 CSS 加载器模块。-- 维护者：
Webpack Team - SASS Loader：Webpack 的 SASS 加载器。-- 维护者：
Jorik Tangelder - Less Loader：Webpack 的 Less 加载器模块。-- 维护者：
Webpack Team - Stylus Loader：Webpack 的 Stylus 加载器。-- 维护者：
Kyle Robinson Young - Isomorphic Style Loader：Webpack 的同构 CSS 样式加载器。-- 维护者：
Kriasoft Team - Minify CSS-in-JS Loader：基于 RegExp 的 Webpack CSS-in-JS 最小化加载器，无需 Babel。-- 维护者：
Zack Young - SASS Resources Loader：全局导入 SASS 资源（变量、混合等）。-- 维护者：
ShakaCode
语言与框架
- TS Loader：Webpack 的 TypeScript 加载器。-- 维护者：
TypeStrong Team - Coffee Loader：Webpack 的 Coffee 加载器模块。-- 维护者：
Webpack Team - Bootstrap Loader：在你的 Webpack 打包中加载 Bootstrap 样式。-- 维护者：
ShakaCode Team - PostHTML Loader：Webpack 的 PostHTML 加载器。-- 维护者：
PostHTML Team - ELM Loader：Elm 编程语言的 Webpack 加载器。-- 维护者：
Richard Feldman - Fengari Loader：使用 Fengari 运行 Lua 代码。-- 维护者：
Daurnimator
实用工具
- Babel Loader：Babel 的 Webpack 插件。-- 维护者：
Babel Team - Worker Loader：Webpack 的 Worker 加载器模块。-- 维护者：
Webpack Team - Resolve URL Loader：解析 url() 语句中的相对路径。-- 维护者：
Ben Holloway - Import Loader：Webpack 的 Imports 加载器模块。-- 维护者：
Webpack Team - SourceMap Loader：从模块中提取 sourceMappingURL 注释。-- 维护者：
Webpack Team - Combine Loader - 将加载器数组转换为单个加载器字符串。-- 维护者：
James Friend - Icon Font Loader - 将 SVG 转换为 CSS 中的字体图标。-- 维护者：
Forrest R. Zhao - Icons Loader - 从 SVG 依赖项生成图标字体。-- 维护者：
Mike Vercoelen - Modernizr Loader - 获取你的 Modernizr 构建并与 Webpack 捆绑。-- 维护者：
Peerigon Devs - ngRouter Loader - 使用 Angular 路由进行 AOT 能力的 NgModule 懒加载 -- 维护者：
Shlomi Assaf - Lingui Loader - 为 jsLingui (i18n 库) 动态编译消息目录 -- 维护者：
Tomáš Ehrlich - Shell Loader - 对源文件运行任意 shell 脚本。-- 维护者：
Jo Sprague - EXIF Loader - 在构建时从你的 JPG 中提取 EXIF- 和 IPTC-数据。-- 维护者：
Emanuel Kluge - esbuild Loader - 由 esbuild 提供支持，是 babel-loader、ts-loader 和 Terser 的极速替代方案。-- 维护者：
Hiroki Osame
测试
- Karma Webpack：将 Karma 与 Webpack 一起使用。-- 维护者：
Webpack Team - Istanbul Webpack plugin：对整个包使用 Istanbul 插桩。-- 维护者：
Hagai Cohen
集成库
- Dotenv Webpack：通过 dotenv 将环境变量编译到你的打包中。-- 维护者：
Matthew Steele - Terse Webpack - 通过预设的流畅 API 简化 Webpack。-- 维护者：
Eric Clemmons - SystemJS Webpack - SystemJS 的 Webpack 打包。-- 维护者：
Guy Bedford - Gulp Webpack Stream - 通过流接口运行 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-store 将环境变量编译到你的打包中。-- 维护者：
Marlon Maxwel
Webpack 插件
- DefinePlugin：创建可在编译时配置的全局常量。-- 维护者：
Webpack Team - Compression Plugin：准备资产以与 Content-Encoding 一起提供。-- 维护者：
Webpack Team - Offline Plugin：Webpack 的离线插件 (ServiceWorker, AppCache)。-- 维护者：
Arthur Stolyar - Rewire Plugin：Webpack 打包的依赖注入。-- 维护者：
Johannes Ewald - HTML Webpack Plugin：简化 HTML 文件的创建。-- 维护者：
Jan Nicklas - Copy Webpack Plugin：在 webpack 中复制文件和目录。-- 维护者：
Len Boyette - Split By Path：按路径分割 Webpack 插件。-- 维护者：
Bohdan Tkachenko - SW Precache - 生成一个 Service Worker 来预缓存打包文件。-- 维护者：
Will Farley - CoreJS Plugin - Core-JS 作为 webpack 插件。-- 维护者：
PatrickJS - Bundle Analyzer - 将打包表示为交互式树状图的实用工具。-- 维护者：
Yuriy Grunin - Module Mapping - 将模块映射到不同的文件。-- 维护者：
Spartez Team - Serverless Webpack - 用于打包你的 Lambda 的 Serverless 插件。-- 维护者：
Elastic Coders - Prerender SPA - 框架无关的 SPA 静态站点生成。-- 维护者：
Chris Fritz - Static Site Generator Plugin - 最小、无主见的静态站点生成器。-- 维护者：
Mark Dalgleish - SVG Sprite Plugin - SVG 精灵图和图标插件。-- 维护者：
Jeremy Tice(TodayTix) - Imagemin Webpack Plugin - 使用 Imagemin 压缩图像。-- 维护者：
Gregory Benner - Prepack Webpack Plugin - Prepack 的 webpack 插件。-- 维护者：
Gajus Kuizinas - Modules CDN Webpack Plugin - 从 CDN 动态加载你的模块。-- 维护者：
Thomas Sileghem - Generate package.json Plugin - 将部署
package.json中的依赖项限制为仅捆绑包中实际使用的依赖项。-- 维护者：Paul Myburgh - Progressive Web App Manifest - PWA manifest 管理器和生成器。-- 维护者：
Arthur A. Bergamaschi - FileManager Webpack Plugin - 在 Webpack 构建前后复制、移动、删除文件和目录 -- 维护者：
Gregory Nowakowski - Fork TS Checker Webpack Plugin - 在单独进程中运行 TypeScript 类型检查器的 Webpack 插件。-- 维护者：
TypeStrong Team - Duplicate Package Checker Webpack Plugin - 当你的打包中存在多个相同包的版本时发出警告 -- 维护者：
Darren Scerri - Circular Dependency Plugin - 在打包时检测循环依赖模块 -- 维护者：
Aaron Ackerman - webpack-inject-plugin - 一个用于动态注入代码到打包中的 webpack 插件。-- 维护者：
Adam Dierkens - Public Path Manipulation Plugin - 在运行时控制动态加载资源的
publicPath-- 维护者：Andrew Goldis - Build Notifier Plugin - 为构建错误和警告显示 OS 级通知。-- 维护者：
Rocco Cataldo - CSS Cleanup Webpack Plugin - 一个用于移除重复和未使用 CSS 规则的插件 -- 维护者：
Dominik Weber - Extension Reloader - 开发浏览器扩展时的热重载 -- 维护者：
Rubens P. G. Cavalcante - Htmls Webpack Plugin：Webpack 的简单快速多 HTML 生成插件。-- 维护者：
Zack Young - Mini css extract plugin：轻量级 CSS 提取插件 -- 维护者：
Webpack Contrib - build-hash-webpack-plugin 每次构建时，Webpack 都会生成一个内存中的哈希，用于判断两个构建输出是否相同。此插件会将描述的构建哈希写入单独的 json 文件。-- 维护者：
Réda Housni Alaoui - webpack-hook-plugin - 在 webpack 构建之前或之后运行任何 shell 命令 -- 维护者：
David Kwon - Dynamic Vendor Webpack Plugin - 提供一种通过动态变量和特定代码拆分导入供应商的方法。-- 维护者
Lilian Saget-Lethias - Define Variable Webpack Plugin - DefinePlugin 的增强版，用于将定义的内容存储在实际变量中。-- 维护者
Lilian Saget-Lethias - Shell Script Webpack Plugin - 一个用于在 编译器钩子 被触发时运行任意 shell 脚本的插件。-- 维护者
Drew Loomer - Stylelint Webpack Plugin：Webpack 的 Stylelint 插件。-- 维护者：
Ricardo Gobbo de Souza - ESLint Webpack Plugin：Webpack 的 ESLint 插件。-- 维护者：
Ricardo Gobbo de Souza - Exclude Assets Webpack Plugin：一个根据路径正则表达式模式从 webpack 输出中排除资产的插件。-- 维护者：
Klayton Faria - Webpack Shell Plugin Next：一个允许你在 webpack 构建之前或之后运行任何 shell 命令的插件。-- 维护者：
Kuzmin Pavel - Gettext Webpack Plugin：使用 gettext 将本地化嵌入到你的打包中。-- 维护者：
Juan Luis Paz - Node Polyfill Plugin：polyfill Node.js 核心模块。-- 维护者：
Richie Bendall - Bytenode Plugin：使用 bytenode 将 JavaScript 编译为字节码。-- 维护者：
Herbert Treis Neto - Chrome Extension Archive Webpack Plugin 创建用于发布 Chrome 扩展到 Chrome Web Store 的存档文件 -- 维护者：
KeisukeYamashita - Layer-pack Webpack Plugin 允许全局导入文件和目录，通过可继承的源代码/npm 包构建单仓库应用并共享 webpack 配置 -- 维护者：
Braun Nathanaël - webpack-typescript-directory-compile-plugin 配置一个 TypeScript 源文件目录和一个 JavaScript 输出目录。源目录中的每个 TypeScript 文件和任何新添加的文件都将被编译为独立的 JavaScript 文件。-- 维护者：
Stephen Sigwart - CycloneDX Webpack Plugin：在编译时从 webpack 打包创建 CycloneDX 软件物料清单 (SBOM)。-- 维护者：
OWASP CycloneDX Team - Transpile Webpack Plugin：将输入文件单独转译为输出文件，而不是捆绑在一起。-- 维护者：
Chungen Li - Manifest Extraction Plugin：在编译 webpack 后生成资产清单。-- 维护者：
Andrew Powell - Transform Async Modules Plugin：一个 Webpack 插件，用于使用 Babel 转译异步模块输出。允许将顶层 await 转译为 ES5。-- 维护者：
Steve Repsher - CSS Layering Plugin：将 CSS 包装在级联层中。-- 维护者：
Kresimir Buric
Webpack 工具
- Webpack Dev Middleware：一个提供实时打包的中间件。-- 维护者：
Webpack Team - Webpack Dev Server：提供 webpack 应用。在更改时更新浏览器。-- 维护者：
Webpack Team - Webpack Merge - 专为 Webpack 设计的合并工具。-- 维护者：
Juho Vepsäläinen - NPM Install Webpack - 使用 Webpack 自动安装和保存依赖。-- 维护者：
Eric Clemmons - Webpack Validator - 使用 Joi 验证你的 webpack 配置。-- 维护者：
js-dxtools Team - Webpack Config Utils - 工具。让你的 webpack 配置更易读。-- 维护者：
Kent C. Dodds - Angular2 Webpack Toolkit - Angular 2 的 Webpack 工具和帮助器。-- 维护者：
AngularClass - Webpack Bundle Analyzer - 将打包表示为交互式树状图。-- 维护者：
Yuriy Grunin - HJS Webpack：用于设置带有热加载功能的 webpack 的帮助器/预设。-- 维护者：
Henrik Joreteg - Webpack Dashboard：一个用于 webpack 开发服务器的 CLI 仪表板。-- 维护者：
Formidable Labs - Neutrino：将 Webpack 的强大功能与预设的简单性结合起来。-- 维护者：
Eli Perelman - Speed Measure Plugin - 测量你的 webpack 插件和加载器的速度。-- 维护者：
Stephen Cook - Time Analytics Plugin - 分析 webpack 中加载器和插件的时间消耗。Speed Measure Plugin 的后继者 -- 维护者：
Song Gao - packtracker.io - 每次提交都进行 Webpack 打包分析，向每个拉取请求报告 webpack 统计信息。
- BundleStats：分析 webpack 统计信息（打包大小、资产、模块、包），并比较不同构建之间的结果。-- 维护者：
Vio - Webpack Landing Generator：轻松创建可转化的着陆页。-- 维护者：
Aliaksei Kuncevic - Webpack Dev Server Firewall：阻止来自未知 IP 的开发服务器访问。-- 维护者：
Igor Adamenko - RelativeCI：在每次构建时运行深入的打包分析，并监控 webpack 打包大小、资产、模块和包。
研究与培训
文章
- Aniketh Saha | 2019年10月16日 - 创建自定义 webpack 插件
- Antoine Caron | 2019年1月18日 - Webpack：一次意想不到的旅程
- Mark Erikson | 2017年3月7日 - 声明式三维地球渲染，使用 Webpack 构建 Cesium + React 应用
- Joseph Zimmerman | 2017年2月2日 - Webpack 详细介绍。
- Jamund Ferguson | 2016年7月22日 - 手动优化 Webpack 构建。
- Sean T. Larkin | 2016年7月21日 - 使用 Chrome 开发者工具学习和调试 webpack！
- Raja Rao DV | 2016年4月10日 - 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日 - 打包你的行囊。
- Hridayesh Sharma | 2020年8月18日 - 使用 Webpack 和 Babel 设置 JavaScript 库
视频
- Sean Larkin JS Kongress | 2019年4月2日 - 一切皆插件：由内而外理解 webpack
- Colt Steele via Youtube| 2019年3月7日 - 学习 Webpack 课程
- Naomi A. Jacobs via BuzzJS 2.0 2017 | 2017年2月27日 - Webpack：它不是魔法
- Jack Franklin at HalfStack2016 | 2016年11月18日 | 使用 Webpack 无缝客户端 JavaScript
- Sean Larkin NEJS Conf | 2016年9月30日 | Webpack：核心概念
- Front End Center Webpack from First Principles | 2016年8月22日 - Webpack 介绍
- Eric Clemmons chat with Kent C. Dodds | 2016年7月1日 - Webpack HMR。
- Mirko Nasato (5 部系列) | 2016年6月7日 - Angular2 与 Webpack 项目设置。
- Jonathan Creamer at Nodevember | 2015年12月5日 - 高级 WebPack。
- Kyle Robinson Young | 2015年7月8日 - Webpack 入门。
- Tasveer Singh at TorontoJS Tech Talk | 2015年4月9日 - Webpack。
- Jeremy Lund at Mountain West JS | 2015年3月28日 - 用 Webpack 包装你的代码。
课程
- 人人都能用的 Webpack - Jeffrey Way 的免费 Laracasts 系列课程
- Webpack 基础 - Sean Larkin 关于 Webpack 基础的简要介绍
- Webpack 性能 - 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 学习资源。
- YouTube 上的 Webpack 从零开始系列 作者 Paris Nakita Kejser
书籍
- SurviveJS - Webpack：免费书籍，指导你从 webpack 学徒到大师。涵盖开发、生产和高级主题。
Webpack 示例
- Webpack 示例：常见 Webpack 功能的示例。
社区示例
Angular
- Angular2 Webpack Starter - AngularClass 提供的 Webpack 驱动的 Angular 2 Starter 套件。
- Angular2 Webpack - Preboot 提供的使用 Webpack 的完整但简单的 Angular 2 启动器。
- Angular2 Webpack Visual Studio - Damien Bod 提供的 ASP.NET Core、Angular2 与 Webpack 和 Visual Studio 集成。
- Angular2 Starter - Brian Schemp 提供的带有 Typescript 和 Webpack 的 Angular2 启动套件。
- Angular2 Seed - Pawel Kozlowski 提供的演示 Angular2 基本概念的简单启动器。
框架无关
- 使用 Webpack 的 ES6 TodoMVC - 用于教学 webpack 的仓库。（查看分支）。来自 Kent C. Dodds。
React
- Create React App - Dan Abramov 提供的无需构建配置即可创建 React 应用的工具。
- React Starter Kit - Kriasoft Team 提供的同构 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 提供的带有 Cordova 的 React TodoMVC 示例。
- React Universally - 一个入门套件，提供生产就绪的通用 React 应用所需的最小配置。
- Razzle Material-UI Styled Example - Erik Engi 提供的使用 Express 和压缩功能的 Styled Components 示例。
- Read - logustra 提供的可高度扩展的 React 样板
- @route-resource-preload/webpack-plugin - 专注于提高应用程序首屏加载速度并提供最佳用户体验，灵感来自 NextJS 的预加载功能，作者 Devin Deng。
Vue
其他
- Juho, Johannes, Tobias & Sean 谈 JavaScript Air - JavaScript Air 播客
- Webpack 面试问题 - 带有答案的面试问题。
- Webpack 可视化配置工具 - 一个在浏览器中创建 webpack 配置的可视化工具
3 贡献者
