webpack 生态资源精选
webpackjsorg-main生态资源
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：微软 MVP 和 Telerik 开发者专家。
- Kees Kluskens - @keeskluskens：Code Yellow 的软件工程师，webpack 核心团队成员。
库
加载器
文件类型
- HTML Loader：用于 Webpack 的 HTML 加载器模块。 -- 维护者：
Webpack 团队 - 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：在 Angular2 组件中内联 html 和样式。 -- 维护者：
Sean Larkin - Handlebars Loader：用于 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 KillingsworthBryan 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 - PWA Manifest Loader - PWA manifest 加载器。 -- 维护者：
autopulated
样式
- 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 资源（变量、混合宏等）。 -- 维护者：
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 - MDX Loader：用于 Webpack 的 MDX 加载器。 -- 维护者：
MDX 团队
实用工具
- Babel Loader：用于 Babel 的 Webpack 插件。 -- 维护者：
Babel 团队 - Worker Loader：用于 Webpack 的 Worker 加载器模块。 -- 维护者：
Webpack 团队 - Resolve URL Loader：解析
url()语句中的相对路径。 -- 维护者：Ben Holloway - Import Loader：用于 Webpack 的导入加载器模块。 -- 维护者：
Webpack 团队 - Combine Loader - 将加载器数组转换为单个加载器字符串。 -- 维护者：
James Friend - Icon Font Loader - 将 svg 转换为 CSS 中的字体图标。 -- 维护者：
Forrest R. Zhao - Icons Loader - 从 SVG 依赖生成 iconfont。 -- 维护者：
Mike Vercoelen - Modernizr Loader - 使用 webpack 打包你的 modernizr 构建。 -- 维护者：
Peerigon Devs - ngRouter Loader - 使用 angular router 实现支持 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 团队 - 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 团队 - 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 - 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 团队 - Serverless Webpack - 用于打包 your lambdas 的 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 团队 - 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 - 为构建错误和警告显示操作系统级通知。 -- 维护者：
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：一个基于路径 RegExp 模式从 webpack 输出中排除资源的插件。 -- 维护者：
Klayton Faria - Webpack Shell Plugin Next：一个允许你在 webpack 构建之前或之后运行任意 shell 命令的插件。 -- 维护者：
Kuzmin Pavel - Gettext Webpack Plugin：使用 gettext 将本地化嵌入到你的打包文件中。 -- 维护者：
Juan Luis Paz - Node Polyfill Plugin：为 Node.js 核心模块提供 polyfill。 -- 维护者：
Richie Bendall - Bytenode Plugin：使用 bytenode 将 JavaScript 编译为字节码。 -- 维护者：
Herbert Treis Neto - Chrome Extension Archive Webpack Plugin：创建归档文件以将 Chrome 扩展发布到 Chrome Web Store。 -- 维护者：
KeisukeYamashita - Layer-pack Webpack Plugin - 允许 glob 导入文件和目录，通过可继承的源代码 / npm 包构建 monorepo 应用并共享 webpack 配置 -- 维护者：
Braun Nathanaël - webpack-typescript-directory-compile-plugin - 配置一个 TypeScript 文件源目录和一个 JavaScript 文件输出目录。源目录中的每个 TypeScript 文件以及任何新添加的文件都将被编译为单独的 JavaScript 文件。 -- 维护者：
Stephen Sigwart - CycloneDX Webpack Plugin：在编译时从 webpack 打包文件创建 CycloneDX 软件物料清单（SBOM）。 -- 维护者：
OWASP CycloneDX 团队 - Transpile Webpack Plugin：将输入文件单独转换（不打包）为输出文件。 -- 维护者：
Chungen Li - Manifest Extraction Plugin：在编译 webpack 后生成资源清单。 -- 维护者：
Andrew Powell - Transform Async Modules Plugin：一个使用 Babel 转换异步模块输出的 Webpack 插件。允许将顶层 await 转换为 ES5。 -- 维护者：
Steve Repsher - CSS Layering Plugin：在级联层中包裹 CSS。 -- 维护者：
Kresimir Buric - @resource-fallback/webpack-plugin - 为 Vite 构建资源（JS/CSS chunk、动态导入）提供运行时重试、多 CDN 回退和源站恢复——零业务代码改动。 -- 维护者：
Ben Lau
Webpack 工具
- Webpack Dev Middleware：提供实时打包文件的中间件。 -- 维护者：
Webpack 团队 - Webpack Dev Server：为 webpack 应用提供服务。在更改时更新浏览器。 -- 维护者：
Webpack 团队 - Webpack Merge - 专为 Webpack 设计的合并工具。 -- 维护者：
Juho Vepsäläinen - NPM Install Webpack - 使用 Webpack 自动安装和保存依赖。 -- 维护者：
Eric Clemmons - Webpack Validator - 使用 Joi 验证你的 webpack 配置。 -- 维护者：
js-dxtools 团队 - 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 dev server 的 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 的访问 dev server。 -- 维护者：
Igor Adamenko - RelativeCI：在每次构建时进行深入的打包分析，并监控 webpack 打包大小、资源、模块和包。
研究与培训
文章
- Aniketh Saha | 2019-10-16 - Creating a Custom webpack Plugin
- Antoine Caron | 2019-01-18 - Webpack : an unexpected journey
- Mark Erikson | 2017-03-07 - Declaratively Rendering Earth in 3D, Building a Cesium + React App with Webpack
- Joseph Zimmerman | 2017-02-02 - A Detailed Introduction To Webpack.
- Jamund Ferguson | 2016-07-22 - Manually Tuning Webpack Builds.
- Sean T. Larkin | 2016-07-21 - Learn and Debug webpack with Chrome Dev Tools!.
- Raja Rao DV | 2016-04-10 - Webpack — The Confusing Parts.
- Andrew Ray | 2016-04-09 - Webpack: When To Use and Why.
- Jonathan Creamer | 2016-02-25 - WebPack Code splitting with ES6 and Babel 6.
- Ilya Zayats | 2016-02-07 - How to split your apps by routes with Webpack.
- Sebastian De Deyne | 2016-02-04 - Adventure Time With Webpack.
- Jonathan Creamer | 2016-01-10 - Advanced WebPack Part 2 - Code Splitting.
- Andy Ccs | 2016-01-02 - Webpack and Docker for Development and Deployment.
- Jonathan Creamer | 2016-06-08 - Advanced WebPack Part 3 - Creating a custom notifier plugin.
- Nader Dabit | 2015-09-07 - Beginner's guide to Webpack.
- Jonathan Creamer | 2015-09-02 - Advanced WebPack Part 1 - The CommonsChunk Plugin.
- Maxime Fabre | 2015-10-16 - Webpack your bags.
- Hridayesh Sharma | 2020-08-18 - Webpack Setup for a JavaScript Library
视频
- Sean Larkin JS Kongress | 2019-04-02 - Everything's a plugin: Understanding webpack from the inside out
- Colt Steele via Youtube | 2019-03-07 - Learn Webpack Course
- Naomi A. Jacobs via BuzzJS 2.0 2017 | 2017-02-27 - Webpack: It's Not Magic
- Jack Franklin at HalfStack2016 | 2016-11-18 | Seamless client side JavaScript w/ Webpack
- Sean Larkin NEJS Conf | 2016-09-30 | Webpack: Core Concepts
- Front End Center Webpack from First Principles | 2016-08-22 - Intro to Webpack
- Eric Clemmons chat with Kent C. Dodds | 2016-07-01 - Webpack HMR.
- Mirko Nasato (5 部分系列) | 2016-06-07 - Angular2 with Webpack Project Setup.
- Jonathan Creamer at Nodevember | 2015-12-05 - Advanced WebPack.
- Kyle Robinson Young | 2015-07-08 - Getting Started with Webpack.
- Tasveer Singh at TorontoJS Tech Talk | 2015-04-09 - Webpack.
- Jeremy Lund at Mountain West JS | 2015-03-28 - Gift Wrap Your Code with Webpack.
课程
- Webpack for Everyone - 由 Jeffrey Way 主讲的免费 Laracasts 系列课程
- Webpack Fundamentals - 由 Sean Larkin 主讲的 Webpack 基础知识简介
- Web Performance with Webpack - 使用 Webpack 解决常见 Web 性能问题，由 Sean Larkin 主讲
- Intro to webpack (playlist) - Egghead.io 上由 Kent C. Dodds 主讲的几段视频播放列表（第一段免费）。
- Angular and Webpack for modular applications - Egghead.io 课程，由 Kent C. Dodds 主讲
- Using Webpack for Production JavaScript Applications - Egghead.io 高级课程，由 Kent C. Dodds 主讲
- Webpack Fundamentals - Joe Eames 在 Pluralsight 上的中级课程
- Webpack Academy - 全面的 webpack 学习资源。
- Webpack from scratch series - YouTube 上由 Paris Nakita Kejser 主讲的系列视频
书籍
- SurviveJS - Webpack：免费书籍，指导你从 webpack 新手成长为大师。涵盖开发、生产环境和高级主题。
Webpack 示例
- Webpack Examples：常见 Webpack 功能的示例。
社区示例
Angular
- Angular2 Webpack Starter - 来自 AngularClass 的由 Webpack 驱动的 Angular 2 入门套件。
- 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 基本概念的简单入门项目。
框架无关
- ES6 TodoMVC with Webpack - 用于教授 webpack 的仓库（查看分支），来自 Kent C. Dodds。
React
- Create React App - 无需构建配置即可创建 React 应用，来自 Dan Abramov。
- 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 和 compression 的 Styled Components 示例。
- Read - 来自 logustra 的高扩展性 react 样板。
- @route-resource-preload/webpack-plugin - 专注于提升应用首屏加载速度，提供最佳用户体验，灵感来自 NextJS 的预加载，来自 Devin Deng。
Vue
其他
- Juho, Johannes, Tobias & Sean on JavaScript Air - JavaScript Air 播客
- Webpack interview questions - 带答案的面试问题。
- Visual config tool for webpack - 在浏览器中创建 webpack 配置的可视化工具。
帮助我们改进文档
发现翻译问题或内容错误？请告诉我们。