webpack4 系列教程: 前言

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/dongyuanxin/webpack-demos

若是对您的学习、工做或者项目有帮助，欢迎帮忙 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 系列教程: 前言