本文档已过期，近来内容请看：https://godbmw.com/passage/76。一共16节课程和代码。感谢支撑。

1. 什么是webpack?

前端现在最主流的
javascript打包东西，在它的协助下，开辟者能够轻松地完成加密代码、多平台兼容。而最主要的是，它为
前端工程化供应了最好支撑。
vue、
react等大型项目的脚手架都是应用 webpack 搭建。

所以，进修webpack能够协助开辟者更好的举行基于javascript言语的开辟事情。

2. 怎样进修webpack?

假如一个新手不幸翻开vue-cli中关于webpack的设置，乱起八糟的设置就像看天书一样（我就是如许）。

所以，进修的时刻照样要从基本学起，起首应当进修经常使用的观点、插件的用法，末了，才根据需要举行组合。

因而，这个系列教程先从JS、编译ES6等方面讲起，逐渐延伸到CSS、SCSS等，再到多页面、懒加载等手艺，力图将知识点解构，而不是殽杂在一同。

3. 关于本课程

3.1 webpack版本

本课程不同于网上的v3版本，采纳最新的webpack4。并且会纪录v3 -> v4晋级过程当中的一些问题。

3.2 课程源码

假如你的自学能力很强，迎接直接来看源码。堆栈地点：https://github.com/dongyuanxi…

假如对您的进修、事情或许项目有协助，迎接帮助 Star，更迎接一同保护。

3.3 课程地点

悉数课程地点: >>> 马上进入: https://godbmw.com/search?category=webpack4%20%E7%B3%BB%E5%88%97%E6%95%99%E7%A8%8B

3.4 课程源码目次 (停止 2018/7/27)

根据知识点，目次分成了 16 个文件夹（
以后还会延续更新）。代码和设置都在对应的文件夹下。

1. demo01: 打包JS
2. demo02: 编译ES6
3. demo03: 多页面解决方案–提取大众代码
4. demo04: 单页面解决方案–代码支解和懒加载
5. demo05: 处置惩罚CSS
6. demo06: 处置惩罚Scss
7. demo07: 提取Scss (CSS等等)
8. demo08: JS Tree Shaking
9. demo09: CSS Tree Shaking
10. demo10: 图片处置惩罚–辨认, 紧缩, Base64编码, 合成雪碧图
11. demo11: 字体文件处置惩罚
12. demo12: 处置惩罚第三方JS库
13. demo13: 天生Html文件
14. demo14: Watch Mode && Clean Plugin
15. demo15: 开辟形式–webpack-dev-server
16. demo16: 临盆形式和开辟形式星散

4. 申谢

此教程是在我进修 mooc 网 四大维度解锁 Webpack3.0 东西全妙技 整顿的代码和v4.0版本的晋级经验。迎接人人去进修。

迎接手艺交流，援用请说明出处。

个人网站：
GodBMW.com

原文链接：
webpack4 系列教程: 媒介