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

2018-12-28 14,871 阅读3分钟

项目介绍

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

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

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

干货：16 节讲解

教程地址: webpack4 系列教程

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

干货：16 个配套代码

GitHub 地址(代码): webpack-demos

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

放在最后

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

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

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

更多系列文章

⭐在GitHub上收藏/订阅⭐

《前端知识体系》

《设计模式手册》

⭐在GitHub上收藏/订阅⭐