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

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

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

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

干货：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 : :star: 生产模式和开发模式分离 :star:

放在最后

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

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

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