阅读 7963

📚免费的渐进式教程: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.comyuanxin.me@gmail.com ,或者去对应的章节进行评论!!!

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

关注下面的标签,发现更多相似文章
评论

查看更多 >