GitHub - dongyuanxin/webpack-demos: ? Demos && Courses for Webpack 4
source link: https://github.com/dongyuanxin/webpack-demos
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
webpack-demos:全网最贴心 webpack 系列教程和配套代码
Wow!全网最贴心的
webpack4
系列中文教程和配套代码 ?
放在开头
由于完全是博主利用业余时间编写和整理的,所以有些地方难免有失偏颇,还请多多海涵。如果您发现错误,欢迎致信 [email protected] 或 [email protected] ,我一定会在第一时间检查和修复!!!
如果本教程和示例代码对您的工作、学习或者爬坑有帮助,请动动您的小手,给个 Star,让更多的朋友了解并且参与进来,蟹蟹 ٩('ω')و
最后,欢迎转载和引用,但请指明出处(github 仓库或者博客文章地址均可)。这套教程和代码确实花费了博主很多精力和时间!
项目背景
上半年在做 web 项目的时候,在webpack
上踩了很多坑。由于使用的是 webpack4,所以网上现成的教程并不多,而且大多数不成体系。还有很多教程,把很多知识点杂糅在一起进行讲解,对于新手来说真的很不友好。
所以我花费了 3 个多月整理了这份教程,一共分成 16 节,每节都有讲解,并且准备了配套代码。*应该说很贴心了吧哈哈哈。*当然,自己回查也很方便!
本来想着做成掘金小册,或者录个视频赚赚钱。奈何深感水平不够,只有一腔热情,所以直接开放了教程和源码。
项目地址
- GitHub 地址(代码): webpack-demos
- 讲解地址(课程): webpack4 系列教程
课程目录
- webpack4 系列教程: 前言: https://godbmw.com/passage/29
- webpack4 系列教程(一): 打包 JS : https://godbmw.com/passage/30
- webpack4 系列教程(二): 编译 ES6 : https://godbmw.com/passage/31
- webpack4 系列教程(三): 多页面解决方案--提取公共代码 : https://godbmw.com/passage/32
- webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载 : https://godbmw.com/passage/33
- webpack4 系列教程(五): 处理 CSS : https://godbmw.com/passage/36
- webpack4 系列教程(六): 处理 SCSS : https://godbmw.com/passage/37
- webpack4 系列教程(七): SCSS 提取和懒加载 : https://godbmw.com/passage/44
- webpack4 系列教程(八): JS Tree Shaking : https://godbmw.com/passage/48
- webpack4 系列教程(九): CSS Tree Shaking : https://godbmw.com/passage/49
- webpack4 系列教程(十): 图片处理汇总 : https://godbmw.com/passage/53
- webpack4 系列教程(十一):字体文件处理 : https://godbmw.com/passage/67
- webpack4 系列教程(十二):处理第三方 JavaScript 库 : https://godbmw.com/passage/68
- webpack4 系列教程(十三):自动生成 HTML 文件 : https://godbmw.com/passage/72
- webpack4 系列教程(十四):Clean Plugin and Watch Mode : https://godbmw.com/passage/73
- webpack4 系列教程(十五):开发模式与 webpack-dev-server :https://godbmw.com/passage/74
- webpack4 系列教程(十六):开发模式和生产模式·实战 : https://godbmw.com/passage/75
代码目录
- 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]
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK