Tecvan-fe/awesome-webpack-4plus

Awesome Webpack4+ 优秀学习资源

搜罗 Webpack 4 or 5 好文章，投稿请到此issue里提交文章，或者直接发pull request。 也欢迎关注公众号【Tecvan】了解更多 Webpack 好文。

🎓 基础入门

📕 使用 Webpack 开发 Web 应用

• 介绍 | Webpack 中文指南
• 2020年了,再不会webpack敲得代码就不香了(近万字实战)
• webpack4 的30个步骤打造优化到极致的 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 Examples
• ruanyf/webpack-demos

📕 使用 Webpack 编写 npm 包

• Let's Write a JavaScript Library in ES6 using Webpack and Babel
• 现代前端库开发指南系列(二):使用 webpack 构建一个库
• [译] 基于 Webpack 和 ES6 打造 JavaScript 类库

📕 使用脚手架

• facebook/create-react-app
• vuejs/vue-cli
• tjx666/awesome-chrome-extension-boilerplate

---

🎓 进阶

📕 高级特性

• Tree Shaking
  • Webpack 4 Tree Shaking 终极优化指南
  • Tree-Shaking性能优化实践 - 原理篇
  • Tree-Shaking性能优化实践 - 实践篇
• 缓存
  • Webpack5 内置缓存方案探索
• Module Federation
  • webpack 5 ModuleFederationPlugin vue 项目初体验

📕 如何编写 Loader

• ✏️ loader知识分享
• 【Webpack进阶】Loader深入解析
• 手把手教你撸一个 Webpack Loader
• 如何开发一个 Webpack Loader ( 一 )

📕 如何编写 Plugin

• Webpack 案例 -- vue-loader 原理分析

• 如何写一个webpack插件（一）

📕 实现原理

• [万字总结] 一文吃透 Webpack 核心原理
• 理解webpack原理，手写一个100行的webpack
• Webpack HMR 原理解析
• AST 与前端工程化实战

📕 面试

• 「吐血整理」再来一打Webpack面试题
• Webpack interview questions
• webpack 中那些最易混淆的 5 个知识点

📕 系列连载

• 深入浅出 Webpack
• Webpack 5 知识体系
• 随笔列表第6页 - 书生小龙 - 博客园
• Webpack Book from SurviveJS
• 史上最走心webpack4.0中级教程--配置之外你应该知道的事
• 范文杰 - 源码解析系列
  • [万字总结] 一文吃透 Webpack 核心原理
  • [源码解读] Webpack 插件架构深度讲解
  • 十分钟精进 Webpack：module.issuer 属性详解
  • 有点难的 webpack 知识点：Dependency Graph 深度解析
  • 有点难的知识点： Webpack Chunk 分包规则详解
  • 分享几个 Webpack 实用分析工具
  • Webpack 原理系列六： 彻底理解 Webpack 运行时
• 刘小夕 - 带你深度解锁 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 打包文件体积过大
• 玩转 webpack，使你的打包速度提升 90%
• ESM vs Webpack 面向高性能构建的探索