# webpack-demos

**Repository Path**: zzy1661/webpack-demos

## Basic Information

- **Project Name**: webpack-demos
- **Description**: 📦 Demos && Courses for Webpack 4
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-16
- **Last Updated**: 2021-06-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# [webpack-demos：全网最贴心 webpack 系列教程和配套代码](https://godbmw.com/passage/76)

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

## 放在开头

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

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

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

## 项目背景

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

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

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

## 项目地址

- GitHub 地址(代码): [webpack-demos](https://github.com/dongyuanxin/webpack-demos)
- 讲解地址(课程): [webpack4 系列教程](https://godbmw.com/search?category=webpack4%20%E7%B3%BB%E5%88%97%E6%95%99%E7%A8%8B)

## [课程目录](https://godbmw.com/search?category=webpack4%20%E7%B3%BB%E5%88%97%E6%95%99%E7%A8%8B)

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

## [代码目录](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：2181111110@qq.com