超棒的 webpack
一個精選的超棒 webpack 資源、函式庫、工具和應用程式清單。它受到 超棒 清單的啟發。歡迎透過貢獻來改善此清單。
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 載入器：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 Loader:
.graphql文件載入器。 -- 維護者：Stephen Wan
元件與範本
- Angular2 Template Loader: 在 Angular2 元件中內嵌 HTML 和樣式。 -- 維護者：
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 元素的 Loader。-- 維護者：
Rob Dodson - Chad Killingsworth - Bryan Coulter - Tag Loader - Riot 標籤檔案的 Loader。-- 維護者：
Riot Team - Twig Loader - Twig 範本 Loader。-- 維護者：
Zimmo.be Team - Auto ngTemplate Loader：自動偵測 Angular 1 範本並載入它們。-- 維護者：
Yash Kulshrestha - Pug Loader - Pug 範本 Loader（以前稱為 Jade）。-- 維護者：
Pug Team - Simple Nunjucks Loader - Nunjucks 範本 Loader。-- 維護者：
ogonkov
樣式
- 樣式載入器: Webpack 的樣式載入器模組。-- 維護者：
Webpack 團隊 - PostCSS 載入器: Webpack 的 PostCSS 載入器。-- 維護者：
PostCSS 團隊 - CSS 載入器: Webpack 的 CSS 載入器模組。-- 維護者：
Webpack 團隊 - SASS 載入器: Webpack 的 SASS 載入器。-- 維護者：
Jorik Tangelder - Less 載入器: Webpack 的 Less 載入器模組。-- 維護者：
Webpack 團隊 - Stylus 載入器: webpack 的 stylus 載入器。-- 維護者：
Kyle Robinson Young - 同構樣式載入器: Webpack 的同構 CSS 樣式載入器。-- 維護者：
Kriasoft 團隊 - Minify CSS-in-JS 載入器: Webpack 的基於 RegExp 的 minify CSS-in-JS 載入器，不需要 babel。-- 維護者：
Zack Young - SASS 資源載入器: 全域匯入 SASS 資源（變數、混合等）。-- 維護者：
ShakaCode
語言和架構
- TS 載入器: Webpack 的 TypeScript 載入器。-- 維護者：
TypeStrong 團隊 - Coffee 載入器: Webpack 的 Coffee 載入器模組。-- 維護者：
Webpack 團隊 - Bootstrap 載入器: 在 Webpack 捆綁包中載入 Bootstrap 樣式。-- 維護者：
ShakaCode 團隊 - PostHTML Loader：Webpack 的 PostHTML loader。-- 維護者：
PostHTML 團隊 - ELM Loader：Elm 程式語言的 Webpack loader。-- 維護者：
Richard Feldman - Fengari Loader：使用 Fengari 執行 Lua 程式碼。-- 維護者：
Daurnimator
公用程式
- Babel Loader：Babel 的 Webpack 外掛程式。-- 維護者：
Babel 團隊 - Worker Loader：Webpack 的 Worker loader 模組。-- 維護者：
Webpack 團隊 - Resolve URL Loader：解析 url() 陳述式中的相對路徑。-- 維護者：
Ben Holloway - Import Loader: Webpack 的 Import Loader 模組。-- 維護者:
Webpack Team - SourceMap Loader: 從模組中擷取 sourceMappingURL 註解。-- 維護者:
Webpack Team - Combine Loader - 將 loader 陣列轉換成單一 loader 字串。-- 維護者:
James Friend - Icon Font Loader - 將 svg 轉換成 CSS 中的字型圖示。-- 維護者:
Forrest R. Zhao - Icons Loader - 從 SVG 依賴項中產生 iconfont。-- 維護者:
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 外掛程式: 為整個套件使用 Istanbul instrumenter。-- 維護者：
Hagai Cohen
整合函式庫
- Dotenv Webpack: 透過 dotenv 將環境變數編譯到您的套件中。-- 維護者：
Matthew Steele - Terse Webpack - 使用預設值，以流暢的 API 簡化 Webpack。-- 維護者：
Eric Clemmons - SystemJS Webpack - Webpack 綑綁 SystemJS。-- 維護者：
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 - 依路徑分割: 依路徑分割 Webpack 外掛。 -- 維護者:
Bohdan Tkachenko - SW 預快取 - 產生服務工作者來預快取套件。 -- 維護者:
Will Farley - CoreJS 外掛 - Core-JS 作為 Webpack 外掛。 -- 維護者:
PatrickJS - 套件分析器 - 將套件表示為互動樹狀圖的實用程式。 -- 維護者:
Yuriy Grunin - 模組對應 - 將模組對應到不同的檔案。 -- 維護者:
Spartez Team - 無伺服器 Webpack - 無伺服器外掛，用於套件化您的 lambda 函數。 -- 維護者:
Elastic Coders - 預渲染 SPA - 不依賴框架的 SPA 靜態網站產生器。 -- 維護者:
Chris Fritz - 靜態網站產生器外掛 - 最小、無意見的靜態網站產生器。-- 維護者：
Mark Dalgleish - SVG 精靈外掛 - SVG 精靈和圖示外掛。-- 維護者：
Jeremy Tice(TodayTix) - Imagemin Webpack 外掛 - 使用 Imagemin 壓縮圖片。-- 維護者：
Gregory Benner - Prepack Webpack 外掛 - 一個 webpack 外掛，用於 prepack。-- 維護者：
Gajus Kuizinas - Modules CDN Webpack 外掛 - 從 CDN 動態載入模組。-- 維護者：
Thomas Sileghem - 產生 package.json 外掛 - 將部署
package.json的相依性限制為套件中實際使用的相依性。-- 維護者：Paul Myburgh - 漸進式網路應用程式清單 - PWA 清單管理員和產生器。-- 維護者：
Arthur A. Bergamaschi - FileManager Webpack 外掛程式 - 在 Webpack 建置前後複製、移動、刪除檔案和目錄 -- 維護者：
Gregory Nowakowski - Fork TS Checker Webpack 外掛程式 - Webpack 外掛程式，在獨立的程序上執行 typescript 類型檢查器。 -- 維護者：
TypeStrong 團隊 - Duplicate Package Checker Webpack 外掛程式 - 當您的套件中存在多個相同套件版本時，會警告您 -- 維護者：
Darren Scerri - Circular Dependency 外掛程式 - 在打包時偵測具有循環相依性的模組 -- 維護者：
Aaron Ackerman - webpack-inject-plugin - 一個 webpack 外掛程式，用於動態注入程式碼到套件中。 -- 維護者：
Adam Dierkens - Public Path Manipulation 外掛程式 - 在執行階段控制動態載入資源的
publicPath-- 維護者：Andrew Goldis - Build Notifier 外掛程式 - 顯示作業系統層級的通知，以告知建置錯誤和警告。 -- 維護者：
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 - 動態供應商 Webpack 外掛 - 提供一種使用動態變數和特定程式碼拆分來匯入供應商的方法。-- 維護者
Lilian Saget-Lethias - 定義變數 Webpack 外掛 - DefinePlugin 的加強版，用於將定義的項目儲存在實際變數中。-- 維護者
Lilian Saget-Lethias - Shell Script Webpack 外掛 - 一個外掛，用於在觸發 編譯器掛鉤 時執行任意 shell script。-- 維護者
Drew Loomer - Stylelint Webpack 外掛: 一個 Stylelint 外掛，適用於 webpack。-- 維護者:
Ricardo Gobbo de Souza - ESLint Webpack 外掛: 一個 ESLint 外掛，適用於 webpack。-- 維護者:
Ricardo Gobbo de Souza - 排除資產 Webpack 外掛: 一個基於路徑 RegExp 樣式的 Webpack 輸出排除資產的外掛。-- 維護者:
Klayton Faria - Webpack Shell 外掛 Next: 一個允許你在 Webpack 建置前或後執行任何 shell 指令的外掛。-- 維護者:
Kuzmin Pavel - Gettext Webpack 外掛: 使用 gettext 將在地化嵌入到你的套件中。-- 維護者:
Juan Luis Paz - Node Polyfill 外掛: 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 - Manifest Extraction 外掛程式：在編譯 webpack 之後產生一個資產清單。-- 維護者：
Andrew Powell
Webpack 工具
- Webpack Dev 中介軟體：一個提供即時捆綁的中介軟體。-- 維護者：
Webpack 團隊 - Webpack Dev 伺服器：提供 webpack 應用程式。在變更時更新瀏覽器。-- 維護者：
Webpack 團隊 - Webpack Merge - 專為 Webpack 設計的合併。-- 維護者：
Juho Vepsäläinen - NPM 安裝 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 開發伺服器的 CLI 儀表板。-- 維護者：
Formidable Labs - Neutrino：結合 Webpack 的強大功能和預設值的簡潔性。-- 維護者：
Eli Perelman - Speed Measure Plugin - 測量您的 webpack 外掛程式和載入器的速度。-- 維護者：
Stephen Cook - 時間分析外掛 - 分析 webpack 中載入器和外掛的時間成本。Speed Measure 外掛的繼承者 -- 維護者：
Song Gao - packtracker.io - 每一次提交的 webpack 程式包分析，將 webpack 統計資料報告給每個 pull request。
- BundleStats：分析 webpack 統計資料（程式包大小、資產、模組、套件），並比較不同建置之間的結果。-- 維護者：
Vio - Webpack 登陸頁面產生器：輕鬆建立轉換率高的登陸頁面。-- 維護者：
Aliaksei Kuncevic - Webpack Dev Server 防火牆：防止未知 IP 存取開發伺服器。-- 維護者：
Igor Adamenko - RelativeCI：在每次建置中執行深入的程式包分析，並監控 webpack 程式包大小、資產、模組和套件。
研究與訓練
文章
- Aniketh Saha | 16-Oct-19 - 建立自訂 webpack 外掛
- Antoine Caron | 18-Jan-19 - Webpack：一段意外的旅程
- Mark Erikson | 07-Mar-17 - 以宣告方式呈現地球 3D 渲染，使用 Webpack 建立 Cesium + React 應用程式
- Joseph Zimmerman | 2-Feb-17 - Webpack 詳細介紹。
- Jamund Ferguson | 22-Jul-16 - 手動調整 Webpack 建置。
- Sean T. Larkin | 21-Jul-16 - 使用 Chrome Dev Tools 學習並除錯 webpack！。
- Raja Rao DV | 10-Apr-16 - Webpack — 令人困惑的部分。
- Andrew Ray | 09-Apr-16 - Webpack：何時使用以及原因。
- Jonathan Creamer | 25-Feb-16 - 使用 ES6 和 Babel 6 進行 WebPack 程式碼分割。
- Ilya Zayats | 07-Feb-16 - 如何使用 Webpack 根據路由分割應用程式。
- Sebastian De Deyne | 04-Feb-16 - 使用 Webpack 的冒險時光。
- Jonathan Creamer | 10-Jan-16 - 進階 WebPack 第 2 部分 - 程式碼分割。
- Andy Ccs | 02-Jan-16 - 用於開發和部署的 Webpack 和 Docker。
- Jonathan Creamer | 08-06-16 - 進階 WebPack 第 3 部分 - 建立自訂通知器外掛。
- Nader Dabit | 07-09-15 - Webpack 初學者指南。
- Jonathan Creamer | 02-09-15 - 進階 WebPack 第 1 部分 - CommonsChunk 外掛。
- Maxime Fabre | 16-10-15 - Webpack your bags。
- Hridayesh Sharma | 18-08-20 - 使用 Webpack 和 Babel 編寫 JavaScript 函式庫
影片
- Sean Larkin JS Kongress | 04-02-2019 - 一切都外掛：從內而外了解 webpack
- Colt Steele 經由 Youtube| 03-07-2019 - 學習 Webpack 課程
- Naomi A. Jacobs 經由 BuzzJS 2.0 2017 | 02-27-2017 - Webpack：它不是魔法
- Jack Franklin 在 HalfStack2016 | 11-18-16 | 使用 Webpack 的無縫客戶端 JavaScript
- Sean Larkin NEJS Conf | 09-30-16 | Webpack：核心概念
- Front End Center Webpack 從第一原理 | 08-22-16 - Webpack 簡介
- Eric Clemmons 與 Kent C. Dodds 聊天 | 07-01-16 - Webpack HMR。
- Mirko Nasato（5 部分系列）| 07-Jun-16 - 使用 Webpack 專案設定 Angular2。
- Nodevember 的 Jonathan Creamer | 05-Dec-15 - 進階 WebPack。
- Kyle Robinson Young | 08-Jul-15 - Webpack 入門。
- TorontoJS Tech Talk 的 Tasveer Singh | 09-Apr-15 - Webpack。
- Mountain West JS 的 Jeremy Lund | 28-Mar-15 - 使用 Webpack 包裝您的程式碼。
課程
- Webpack for Everyone - Jeffrey Way 的免費 Laracasts 系列課程
- Webpack Fundamentals - Sean Larkin 關於 Webpack 基礎知識的簡要介紹
- 使用 Webpack 提升網路效能 - Sean Larkin 使用 Webpack 解決常見網路效能問題
- Webpack 簡介（播放清單） - Kent C. Dodds 在 Egghead.io 上的幾部影片播放清單（第一部免費）。
- 針對模組化應用程式的 Angular 和 Webpack - Kent C. Dodds 在 Egghead.io 上的課程
- 使用 Webpack 進行生產用 JavaScript 應用程式 - Kent C. Dodds 在 Egghead.io 上的課程（進階）
- Webpack Fundamentals - Joe Eames 在 Pluralsight 上的課程（中階）
- Webpack Academy - 一個全面的 webpack 學習資源。
- Webpack 從零開始系列，作者為 Paris Nakita Kejser，在 YouTube 上提供。
書籍
- SurviveJS - Webpack：免費書籍，由 webpack 學徒指導成為大師。涵蓋開發、生產和進階主題。
Webpack 範例
- Webpack 範例：常見 Webpack 功能的範例。
社群範例
Angular
- Angular2 Webpack Starter - 由 AngularClass 提供的 Webpack 驅動 Angular 2 Starter 套件。
- Angular2 Webpack - 由 Preboot 提供的完整但簡單的 Angular 2 Starter，使用 Webpack。
- Angular2 Webpack Visual Studio - 由 Damien Bod 提供的 ASP.NET Core、Angular2 與 Webpack 和 Visual Studio。
- Angular2 Starter - 由 Brian Schemp 提供的 Angular2 Starter 套件，使用 Typescript 和 Webpack。
- Angular2 Seed - 由 Pawel Kozlowski 提供的簡單 Starter，展示 Angular2 的基本概念。
與框架無關
- ES6 TodoMVC with Webpack - 用於教學 webpack 的儲存庫。（查看分支）。由 Kent C. Dodds 提供。
React
- 建立 React 應用程式 - 由 Dan Abramov 提供，建立 React 應用程式，無需建置設定。
- React Starter Kit - Kriasoft 團隊 的同構式網頁應用程式樣板。
- React Redux Universal - Erik Rasmussen 的通用式網頁應用程式樣板。
- 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 的使用 Styled Components 搭配 Express 和壓縮功能。
- Read - logustra 的高度可擴充 React 樣板。
- @route-resource-preload/webpack-plugin - 專注於改善應用程式的首頁載入速度，並提供最佳使用者體驗，靈感來自 NextJS 的預載功能，由 Devin Deng 提供。
Vue
其他
- Juho、Johannes、Tobias 和 Sean 在 JavaScript Air - JavaScript Air podcast
- Webpack 訪談問題 - 訪談問題和解答。
- Webpack 的視覺化設定工具 - 一個在瀏覽器中建立 Webpack 設定的視覺化工具
3 貢獻者
