V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2225 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

放在开头

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

如果本教程和示例代码对您的工作、学习或者爬坑有帮助，请动动您的小手，给个 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]

第 1 条附言 · 2018-12-13 13:11:38 +08:00

> 配套讲解地址更新：

1. webpack4 系列教程: 前言: [https://godbmw.com/passages/2018-07-29-webpack-demos-introduction/]
2. webpack4 系列教程(一): 打包 JS : [https://godbmw.com/passages/2018-07-30-webpack-pack-js/]
3. webpack4 系列教程(二): 编译 ES6 : [https://godbmw.com/passages/2018-07-31-webpack-compile-es6/]
4. webpack4 系列教程(三): 多页面解决方案--提取公共代码 : [https://godbmw.com/passages/2018-08-06-webpack-mutiple-pages/]
5. webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载 : [https://godbmw.com/passages/2018-08-08-webpack-spa-split-lazy/]
6. webpack4 系列教程(五): 处理 CSS : [https://godbmw.com/passages/2018-08-17-webpack-css/]
7. webpack4 系列教程(六): 处理 SCSS : [https://godbmw.com/passages/2018-08-18-webpack-scss/]
8. webpack4 系列教程(七): SCSS 提取和懒加载 : [https://godbmw.com/passages/2018-08-28-webpack-scss-lazy/]
9. webpack4 系列教程(八): JS Tree Shaking : [https://godbmw.com/passages/2018-09-01-js-tree-shaking/]
10. webpack4 系列教程(九): CSS Tree Shaking : [https://godbmw.com/passages/2018-09-02-css-tree-shaking/]
11. webpack4 系列教程(十): 图片处理汇总 : [https://godbmw.com/passages/2018-09-11-webpack-image/]
12. webpack4 系列教程(十一)：字体文件处理 : [https://godbmw.com/passages/2018-10-09-webpack-chracter-file/]
13. webpack4 系列教程(十二)：处理第三方 JavaScript 库 : [https://godbmw.com/passages/2018-10-09-webpack-js-pacakge/]
14. webpack4 系列教程(十三)：自动生成 HTML 文件 : [https://godbmw.com/passages/2018-10-17-automatic-html/]
15. webpack4 系列教程(十四)：Clean Plugin and Watch Mode : [https://godbmw.com/passages/2018-10-18-webpack-clean-and-watch-mode/]
16. webpack4 系列教程(十五)：开发模式与 webpack-dev-server :[https://godbmw.com/passages/2018-10-19-webpack-dev-server/]
17. webpack4 系列教程(十六)：开发模式和生产模式·实战 : [https://godbmw.com/passages/2018-10-19-webpack-dev-and-prod/]

webpack4

教程

代码

系列

44 条回复 • 2018-10-25 09:27:00 +08:00

godbmw

2018-10-19 16:28:17 +08:00

没人评论吗┭┮﹏┭┮

给自己占个坑

hellowmykami

2018-10-19 16:30:24 +08:00

教程先点个 star

superzzy

2018-10-19 16:30:55 +08:00

点 star

godbmw

2018-10-19 16:34:38 +08:00

@hellowmykami 多谢多谢

godbmw

2018-10-19 16:34:49 +08:00

@superzzy 感动，多谢多谢

vanishcode

2018-10-19 16:41:45 +08:00 via Android

我滋磁！

MLLB

2018-10-19 16:50:00 +08:00

好东西，感谢感谢！

godbmw

2018-10-19 16:50:40 +08:00

@vanishcode 没读懂哈哈

godbmw

2018-10-19 16:51:03 +08:00

@MLLB (#^.^#)心里美滋滋

HFX3389

2018-10-19 16:53:40 +08:00

资瓷！

zirconium

2018-10-19 17:05:10 +08:00

支持

Exia

2018-10-19 17:21:00 +08:00

star 我前段时间也升级了 webpack4，先来读读楼主的教程，方便日后请教

moxiaonai

2018-10-19 17:22:52 +08:00 via Android

支持，赞一个，这两天正用到，查了大量资料

wongskay

2018-10-19 18:15:20 +08:00

支持一下

IamJ

2018-10-19 18:26:19 +08:00 via iPhone

感谢，收藏一波

hester

2018-10-19 19:22:11 +08:00 via Android

无论质量如何，能有这份心意，还是非常值得尊敬的。
做教程是很辛苦的。

hester

2018-10-19 19:23:00 +08:00 via Android

@hester
回复上一楼，我相信质量也没得说。*罒▽罒*

liang511

2018-10-19 20:31:31 +08:00

支持，收藏一波，有空看一看

chotow

2018-10-19 20:31:32 +08:00 via Android

我被楼主的 QQ 号吸引了…

godbmw

2018-10-19 21:45:00 +08:00

@chotow 年轻时候买的哈哈哈

godbmw

2018-10-19 21:45:55 +08:00

@hester 欢迎多来逛逛。我水平有限，有些地方有心无力。手动捂脸。

lmqdlr

2018-10-19 21:49:20 +08:00 via Android

就是有一点，能不能不要默认播放音乐

godbmw

2018-10-19 22:06:08 +08:00

@lmqdlr 手动捂脸，这周末之前，会关闭自动播放，并且还会关掉歌词展示。确实影响阅读体验，当时加这个功能是头脑一热。

chenhonzhou

2018-10-19 22:26:08 +08:00 via Android

教程点个赞，
其它的均为 gb
337848818

adian

2018-10-19 23:08:21 +08:00

哇，支持

CODEWEA

2018-10-20 00:03:46 +08:00

老铁你这是从入门到生产环境啊

godbmw

2018-10-20 00:05:01 +08:00

@CODEWEA 是鸭，不是“从入门到入坟”就好哈哈

easylee

2018-10-20 00:12:57 +08:00 via Android

看了楼主博客，狠狠甩了自己几个耳刮子。

valentin508

2018-10-20 01:20:04 +08:00 via Android

很优秀的学弟啊！我也是深大的应届师兄，自愧不如哈哈哈，向你学习！(我得赶紧把博客的坑填了)

imxieke

2018-10-20 11:46:43 +08:00

正准备入坑 (主要是前端懒

) ,
谢谢楼主分享

chungzhao

2018-10-20 13:25:57 +08:00

后排资瓷

godbmw

2018-10-20 13:57:49 +08:00

@easylee (*︾▽︾)

godbmw

2018-10-20 13:58:28 +08:00

@imxieke 专为懒癌晚期准备（手动狗头）

godbmw

2018-10-20 13:58:51 +08:00

@chungzhao 多谢多谢

teslayun

2018-10-20 14:18:44 +08:00

感谢楼主

imdoge

2018-10-22 01:51:24 +08:00

先收藏了，改天和自己项目的对比一下，有所启发哈

Norie

2018-10-22 08:18:37 +08:00 via Android

评论之前先收藏

godbmw

2018-10-22 15:48:52 +08:00

@Norie 有评论就好<(*￣▽￣*)/

oukichi

2018-10-22 20:34:03 +08:00

@godbmw 老铁你这个是真的贴心。

lpbname777

2018-10-23 01:26:00 +08:00 via iPhone

Star

deathscythe

2018-10-23 14:13:01 +08:00

有点厉害~先 Star 一下

godbmw

2018-10-24 18:09:02 +08:00

@deathscythe 蟹蟹

godbmw

2018-10-24 18:09:24 +08:00

@oukichi 随用随查哈哈

Molang

2018-10-25 09:27:00 +08:00

已 star

[原创+分享] 全网最贴心 webpack 系列教程和配套代码

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

放在开头

项目背景

项目地址

课程目录

代码目录

关于作者