📚免费的渐进式教程：Webpack4的16篇讲解和16份代码

项目介绍

首先，没有标题党！这套教程确实是免费的，并且针对每节讲解准备了对应的代码，代码环境是webpack4。

课程以常见的webpack4用法为主线，按照从易到难的顺序，逐步引导搭建，渐进式教程真香。

截至公元 2018 年 12 月 26 日，此套开源教程已经在 Github 上收获了 189 Stars，下方是截图 👇：

干货：16 节讲解

教程地址: webpack4 系列教程

1. webpack4 系列教程: 前言: godbmw.com/passages/20…
2. webpack4 系列教程(一): 打包 JS : godbmw.com/passages/20…
3. webpack4 系列教程(二): 编译 ES6 : godbmw.com/passages/20…
4. webpack4 系列教程(三): 多页面解决方案–提取公共代码 : godbmw.com/passages/20…
5. webpack4 系列教程(四): 单页面解决方案–代码分割和懒加载 : godbmw.com/passages/20…
6. webpack4 系列教程(五): 处理 CSS : godbmw.com/passages/20…
7. webpack4 系列教程(六): 处理 SCSS : godbmw.com/passages/20…
8. webpack4 系列教程(七): SCSS 提取和懒加载 : godbmw.com/passages/20…
9. webpack4 系列教程(八): JS Tree Shaking : godbmw.com/passages/20…
10. webpack4 系列教程(九): CSS Tree Shaking : godbmw.com/passages/20…
11. webpack4 系列教程(十): 图片处理汇总 : godbmw.com/passages/20…
12. webpack4 系列教程(十一)：字体文件处理 : godbmw.com/passages/20…
13. webpack4 系列教程(十二)：处理第三方 JavaScript 库 : godbmw.com/passages/20…
14. webpack4 系列教程(十三)：自动生成 HTML 文件 : godbmw.com/passages/20…
15. webpack4 系列教程(十四)：Clean Plugin and Watch Mode : godbmw.com/passages/20…
16. webpack4 系列教程(十五)：开发模式与 webpack-dev-server :godbmw.com/passages/20…
17. webpack4 系列教程(十六)：开发模式和生产模式·实战 : godbmw.com/passages/20…

干货：16 个配套代码

GitHub 地址(代码): webpack-demos

1. demo01: 打包JS
2. demo02: 编译ES6
3. demo03: 多页面解决方案–提取公共代码
4. demo04: 单页面解决方案–代码分割和懒加载
5. demo05: 处理CSS
6. demo06: 处理Scss
7. demo07: 提取Scss (CSS等等)
8. demo08: JS Tree Shaking
9. demo09: CSS Tree Shaking
10. demo10: 图片处理–识别, 压缩, Base64编码, 合成雪碧图
11. demo11: 字体文件处理
12. demo12: 处理第三方JS库
13. demo13: 生成Html文件
14. demo14: Watch Mode && Clean Plugin
15. demo15: 开发模式–webpack-dev-server
16. demo16: ⭐ 生产模式和开发模式分离 ⭐

放在最后

说句实在话，webpack4其实完全靠文档，但是刚入手的时候还是有个简易教程比较好。所以没有必要用这种教程去收费（请忽略我）。

而由于完全是个人利用业余时间整理和编写的，加之水平有限，不足之处还请多多海涵。如果您发现错误，欢迎致信 2181111110@qq.com 或 yuanxin.me@gmail.com ，或者去对应的章节进行评论！！！

最后，软广一波：如果本教程和示例代码对您的工作、学习或者爬坑有帮助，欢迎 Star，蟹蟹 ٩(‘ω’)و

更多系列文章

⭐在GitHub上收藏/订阅⭐

《前端知识体系》

• JavaScript基础知识梳理(上)
• JavaScript基础知识梳理(下)
• 谈谈promise/async/await的执行顺序与V8引擎的BUG
• 前端面试中常考的源码实现
• Flex上手与实战
• ……

《设计模式手册》

• 单例模式
• 策略模式
• 代理模式
• 迭代器模式
• 订阅-发布模式
• 桥接模式
• 备忘录模式
• 模板模式
• 抽象工厂模式
• ……

⭐在GitHub上收藏/订阅⭐