📦 Demos && Courses for Webpack 4
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo01
demo02
demo03
demo04
demo05
demo06
demo07
demo08 简化: demo08配置代码 Aug 30, 2018
demo09
demo10
demo11
demo12
demo13
demo14
demo15
demo16
.gitignore 更新: 目录和gitignore文件 Jul 8, 2018
README.md

README.md

webpack-demos:全网最贴心 webpack 系列教程和配套代码

Wow!全网最贴心的webpack4系列中文教程和配套代码 👇

放在开头

由于完全是博主利用业余时间编写和整理的,所以有些地方难免有失偏颇,还请多多海涵。如果您发现错误,欢迎致信 2181111110@qq.com 或 yuanxin.me@gmail.com ,我一定会在第一时间检查和修复!!!

如果本教程和示例代码对您的工作、学习或者爬坑有帮助,请动动您的小手,给个 Star,让更多的朋友了解并且参与进来,蟹蟹 ٩('ω')و

最后,欢迎转载和引用,但请指明出处(github 仓库或者博客文章地址均可)。这套教程和代码确实花费了博主很多精力和时间!

项目背景

上半年在做 web 项目的时候,在webpack上踩了很多坑。由于使用的是 webpack4,所以网上现成的教程并不多,而且大多数不成体系。还有很多教程,把很多知识点杂糅在一起进行讲解,对于新手来说真的很不友好。

所以我花费了 3 个多月整理了这份教程,一共分成 16 节,每节都有讲解,并且准备了配套代码。*应该说很贴心了吧哈哈哈。*当然,自己回查也很方便!

本来想着做成掘金小册,或者录个视频赚赚钱。奈何深感水平不够,只有一腔热情,所以直接开放了教程和源码。

项目地址

课程目录

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

代码目录

  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: ⭐ 生产模式和开发模式分离 ⭐

关于作者