[建議收藏] Webpack 4+ 優秀學習資料合集

背景

最近在學習 Webpack 源碼，前先後後輸出了 6 篇原理分析、工具分享類型的文章，過程當中找到一些質量很高，值得一看的學習資料，因此熬夜整理了一波，但願對你們有幫助。

本文內容已同步到 github.com/Tecvan-fe/a… ，歡迎投稿。

收錄的規則很簡單：

• 內容適用於 Webpack 4 以上
• 不看點贊、閱讀數，篇幅也能夠很短，但內容必須詳實，不能有明顯偏誤
• 不求量不求全，但求涵蓋應用、原理、工具等維度，可以給各個層級的同窗帶來新的知識

將來我會持續維護這份列表，很是歡迎社區小夥伴們評論或到我我的公衆號 tecvan 投稿。

關注公衆號【Tecvan】，回覆【2】，博主手把手帶你進字節

Webpack 基礎

使用 Webpack 開發 Web 應用

• 介紹 | Webpack 中文指南: 比較基礎比較細的入門教程，很適合初學者
• 2020年了,再不會webpack敲得代碼就不香了(近萬字實戰): 掘金 3000 贊，很是詳盡的應用指南，特別是最後性能優化那一塊有很強的實踐指導意義
• webpack4 的30個步驟打造優化到極致的 react 開發環境，如約而至: 介紹 Webpack + React 開發環境搭建的方方面面，建議讀者按圖索驥
• How to use Webpack with React: an in-depth tutorial
• webpack-contrib/awesome-webpack
• petehunt/webpack-howto
• Webpack 初學者教學課程 Part 1 - Webpack 簡介
• A mostly complete guide to webpack 5 (2020)

使用 Webpack 編寫 npm 包

• Let's Write a JavaScript Library in ES6 using Webpack and Babel
• 現代前端庫開發指南系列(二):使用 webpack 構建一個庫
• [譯] 基於 Webpack 和 ES6 打造 JavaScript 類庫

使用腳手架

• facebook/create-react-app: 快速建立 React 應用腳手架工具
• vuejs/vue-cli: 快速建立 Vue 應用腳手架工具
• tjx666/awesome-chrome-extension-boilerplate : 基於 React & TypeScript & Webpack 的 Chrome 擴展開發模板

Hello World

• Webpack Examples： Webpack 官方提供的示例，涵蓋大多數特性的用法
• ruanyf/webpack-demos: 阮一峯老師的 Webpack 入門示例

Webpack 進階

高級特性

• Tree Shaking
  • Webpack 4 Tree Shaking 終極優化指南
  • Tree-Shaking性能優化實踐 - 原理篇
  • Tree-Shaking性能優化實踐 - 實踐篇
• 緩存
  • Webpack5 內置緩存方案探索
• Module Federation
  • webpack 5 ModuleFederationPlugin vue 項目初體驗

如何編寫 Loader

• ✏️ loader知識分享: 展開講解了 loader 的應用、種類、原理、執行方式等內容，質量很高
• 【Webpack進階】Loader深刻解析: 雖然閱讀量跟贊都很少，但內容詳盡，值得看一看
• 手把手教你擼一個 Webpack Loader
• 如何開發一個 Webpack Loader ( 一 )

如何編寫 Plugin

• Webpack 案例 -- vue-loader 原理分析: 結合 vue-loader ，實例分析如何編寫 Webpack 插件，特別分析了 vue-loader 如何解析一份 SFC 中的三種內容；如何複用 Webpack 配置中的其它 Loader

• 如何寫一個webpack插件（一）

實現原理

• [萬字總結] 一文吃透 Webpack 核心原理
• 理解webpack原理，手寫一個100行的webpack
• Webpack HMR 原理解析 : 知乎高贊，很是詳細的 Hot Module Replace 原理分析文檔
• AST 與前端工程化實戰

面試

• 「吐血整理」再來一打Webpack面試題: 掘金高贊，以面試題視角概要解釋 Webpack 中的各個知識點
• Webpack interview questions
• webpack 中那些最易混淆的 5 個知識點: 講解 Webpack 一些經常使用但容易被忽視的配置項，對面試和平常應用都頗有啓發

系列連載

• 範文傑 - 源碼解析 Webpack(私貨)
  • [萬字總結] 一文吃透 Webpack 核心原理
  • [源碼解讀] Webpack 插件架構深度講解
  • 十分鐘精進 Webpack：module.issuer 屬性詳解
  • 有點難的 webpack 知識點：Dependency Graph 深度解析
  • 有點難的知識點： Webpack Chunk 分包規則詳解
  • 分享幾個 Webpack 實用分析工具

• 深刻淺出 Webpack: 應該是國內最詳盡的 Webpack 書籍，從入門到應用，再到原理、工具都有介紹，很是值得入手
• Webpack 5 知識體系: 一份拆解 Webpack 核心原理、架構、編譯流程、loader、插件的在線知識圖譜
• 隨筆列表第6頁 - 書生小龍 - 博客園: 一系列 Webpack 源碼分析文章，每篇文章都針對源碼某一個特別小的點展開來說
• Webpack Book from SurviveJS : 一本深刻淺出 Webpack 應用、原理、工具等主題的在線書籍
• 史上最走心webpack4.0中級教程--配置以外你應該知道的事
• 劉小夕 - 帶你深度解鎖 Webpack 系列
  • 帶你深度解鎖Webpack系列(基礎篇)
  • 帶你深度解鎖Webpack系列(進階篇)
  • 帶你深度解鎖Webpack系列(優化篇)
• 滴滴前端技術團隊 - 比較硬核的 Webpack 原理分析系列文章，得靜下心來慢慢看
  • 你不知道的webpack靜態文件生成過程
  • webpack系列之七-文件生成
  • webpack系列之七-附dependencyTemplates依賴模板
  • webpack系列之六chunk圖生成
  • webpack系列之五module生成1
  • webpack系列之四loader詳解1
  • webpack系列之三resolve
  • webpack系列之二Tapable
  • webpack系列之一總覽

性能優化

• Web Performance Optimization with Webpack
• Webpack 4: mode and optimization
• The 100% correct way to split your chunks with Webpack
• iamakulov/awesome-webpack-perf
• Webpack 構建性能優化探索
• 開發工具心得：如何 10 倍提升你的 Webpack 構建效率
• webpack Performance: The Comprehensive Guide
• 完全解決Webpack打包慢的問題
• webpack 構建性能優化策略小結
• 完全解決 webpack 打包文件體積過大: 文章介紹 5 種常見的包體積優化方法，行文特別清晰
• 玩轉 webpack，使你的打包速度提高 90%
• ESM vs Webpack 面向高性能構建的探索