webpack-demos:全网最贴心 webpack 系列教程和配套代码
Wow!全网最贴心的
webpack4
系列中文教程和配套代码👇
放在开头
由于完全是博主利用业余时间编写和整理的,所以有些地方难免有失偏颇,还请多多海涵。如果您发现错误,欢迎致信 [email protected] 或 [email protected] ,我一定会在第一时间检查和修复!!!
如果本教程和示例代码对您的工作、学习或者爬坑有帮助,请动动您的小手,给个 Star,让更多的朋友了解并且参与进来,蟹蟹 ٩('ω')و
最后,欢迎转载和引用,但请指明出处(github 仓库或者博客文章地址均可)。这套教程和代码确实花费了博主很多精力和时间!
项目背景
上半年在做 web 项目的时候,在webpack
上踩了很多坑。由于使用的是 webpack4,所以网上现成的教程并不多,而且大多数不成体系。还有很多教程,把很多知识点杂糅在一起进行讲解,对于新手来说真的很不友好。
所以我花费了 3 个多月整理了这份教程,一共分成 16 节,每节都有讲解,并且准备了配套代码。*应该说很贴心了吧哈哈哈。*当然,自己回查也很方便!
本来想着做成掘金小册,或者录个视频赚赚钱。奈何深感水平不够,只有一腔热情,所以直接开放了教程和源码。
项目地址
- GitHub 地址(代码): webpack-demos
- 讲解地址(课程): webpack4 系列教程
课程目录
- 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: 生产模式和开发模式分离
代码目录
- 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:
⭐ 生产模式和开发模式分离⭐
关于作者
- GitHub: https://github.com/dongyuanxin
- 我的技术博客: godbmw.com
- Email:[email protected]