Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dongyuanxin/webpack-demos
📦 Demos && Courses for Webpack 4
https://github.com/dongyuanxin/webpack-demos
css html javascript node webpack webpack4
Last synced: about 2 months ago
JSON representation
📦 Demos && Courses for Webpack 4
- Host: GitHub
- URL: https://github.com/dongyuanxin/webpack-demos
- Owner: dongyuanxin
- Archived: true
- Created: 2018-07-08T16:22:24.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-08-23T03:22:23.000Z (about 2 years ago)
- Last Synced: 2024-04-16T16:38:02.767Z (5 months ago)
- Topics: css, html, javascript, node, webpack, webpack4
- Language: JavaScript
- Homepage: https://github.com/dongyuanxin/blog
- Size: 195 KB
- Stars: 628
- Watchers: 16
- Forks: 140
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-hacking-lists - dongyuanxin/webpack-demos - 📦 Demos && Courses for Webpack 4 (JavaScript)
README
# [webpack-demos：全网最贴心 webpack 系列教程和配套代码](https://0x98k.com/2018-07-29-webpack-demos-introduction)
> Wow！全网最贴心的`webpack4`系列中文教程和配套代码 👇
## 放在开头
由于完全是博主利用业余时间编写和整理的，所以有些地方难免有失偏颇，还请多多海涵。如果您发现错误，欢迎致信 [email protected] 或 [email protected] ，我一定会在第一时间检查和修复！！！
**如果本教程和示例代码对您的工作、学习或者爬坑有帮助，请动动您的小手，给个 Star，让更多的朋友了解并且参与进来，蟹蟹 ٩\('ω'\)و**
**最后，欢迎转载和引用，但请指明出处（github 仓库或者博客文章地址均可）。这套教程和代码确实花费了博主很多精力和时间！**
## 项目背景
上半年在做 web 项目的时候，在`webpack`上踩了很多坑。由于使用的是 webpack4，所以网上现成的教程并不多，而且大多数不成体系。还有很多教程，把很多知识点杂糅在一起进行讲解，对于新手来说真的很不友好。
所以我花费了 3 个多月整理了这份教程，一共分成 16 节，每节都有讲解，并且准备了配套代码。*应该说很贴心了吧哈哈哈。*当然，自己回查也很方便！
本来想着做成掘金小册，或者录个视频赚赚钱。奈何深感水平不够，只有一腔热情，所以直接开放了教程和源码。
## 项目地址
- GitHub 地址(代码): [webpack-demos](https://github.com/dongyuanxin/webpack-demos)
- 讲解地址(课程): [webpack4 系列教程](./docs/)
## 课程目录
1. [demo01](./docs/01.一：打包JS): 打包`JS`
2. [demo02](./docs/02.二：编译ES6): 编译`ES6`
3. [demo03](./docs/03.三：多页面解决方案--提取公共代码): 多页面解决方案--提取公共代码
4. [demo04](./docs/04.四：单页面解决方案--代码分割和懒加载): 单页面解决方案--代码分割和懒加载
5. [demo05](./docs/05.五：处理CSS): 处理`CSS`
6. [demo06](./docs/06.六：处理SCSS): 处理`Scss`
7. [demo07](./docs/07.七：SCSS提取和懒加载): 提取`Scss` (`CSS`等等)
8. [demo08](./docs/08.八：JS-Tree-Shaking): JS Tree Shaking
9. [demo09](./docs/09.九：CSS-Tree-Shaking): CSS Tree Shaking
10. [demo10](./docs/10.十：图片处理汇总): 图片处理--识别, 压缩, `Base64`编码, 合成雪碧图
11. [demo11](./docs/11.十一：字体文件处理): 字体文件处理
12. [demo12](./docs/12.十二：处理第三方JavaScript库): 处理第三方`JS`库
13. [demo13](./docs/13.十三：自动生成HTML文件): 生成`Html`文件
14. [demo14](./docs/14.十四：Clean-Plugin-and-Watch-Mode): `Watch` Mode && Clean Plugin
15. [demo15](./docs/15.十五：开发模式与webpack-dev-server): 开发模式--`webpack-dev-server`
16. [demo16](./docs/16.十六：开发模式和生产模式·实战): 生产模式和开发模式分离
## [代码目录](https://github.com/dongyuanxin/webpack-demos)
1. [demo01](./demo01): 打包`JS`
2. [demo02](./demo02): 编译`ES6`
3. [demo03](./demo03): 多页面解决方案--提取公共代码
4. [demo04](./demo04): 单页面解决方案--代码分割和懒加载
5. [demo05](./demo05): 处理`CSS`
6. [demo06](./demo06): 处理`Scss`
7. [demo07](./demo07): 提取`Scss` (`CSS`等等)
8. [demo08](./demo08): JS Tree Shaking
9. [demo09](./demo09): CSS Tree Shaking
10. [demo10](./demo10): 图片处理--识别, 压缩, `Base64`编码, 合成雪碧图
11. [demo11](./demo11): 字体文件处理
12. [demo12](./demo12): 处理第三方`JS`库
13. [demo13](./demo13): 生成`Html`文件
14. [demo14](./demo14): `Watch` Mode && Clean Plugin
15. [demo15](./demo15): 开发模式--`webpack-dev-server`
16. [demo16](./demo16): ⭐ 生产模式和开发模式分离 ⭐
## 关于作者
- GitHub: [https://github.com/dongyuanxin](https://github.com/dongyuanxin)
- 我的技术博客: [godbmw.com](https://godbmw.com/)
- Email：[email protected]