第 9 阶段：每位前端人都需要搞懂、搞透前端构建

前端构建是每位前端人都要搞懂、搞透的内容。这段时间，我对前端构建进行了一次系统学习（以 webpack 为主），发现 webpack 中隐藏了太多值得我们去学习的知识。如果你想提高自己的技术，学习 webpack 的设计思想绝对是一件非常值得投入的事情。当然，不能仅仅停留在会用阶段，心中要一个思想，如果让你来做一个 webpack，你会咋么做？

在第 9 阶段，我将会和大家一起搞懂、搞透 webpack，最终对前端构建有一个比较深的理解，这也是我写第 9 阶段的初衷。这一期我会投入更多的精力来做这件事情，希望能够帮助大家不仅会用 webpack，更能够搞懂 webpack 的设计思想。

本阶段预计需要 20 天（每天内容不会很长），结束后，我会把这阶段的内容写成一本 mini 版的电子书。为了能够和大家互动，希望在本阶段大家能够打卡学习，凡是打卡满 15 天的同学，将获得我为你亲自定制的电子书，算是对你能够坚持到最后的一种认可，顺便也交个朋友。

这期内容大致如下，我会从实际应用，到设计思想来拆解 webpack。

1、前端构建工具历史

从构建工具的发展历史来看，能够理解 webpack 能够帮助我们解决什么样的问题。

2、为啥需要 webpack

在我看来 webpack 就是一个「工具集」，把源代码通过各种小工具进行处理，最终形成浏览器能识别的代码，这样既满足了开发者的体验，又满足了浏览器的要求。

3、前端模块化

下面是前端模块化的 3 种规范，规范的目的就是为了能够让生产者按统一的标准来生产零件，就好像安卓的数据线，接口都是按照统一的标准来生产。

4、核心思想

光会用还不行，如果让你实现个类似 webpack 的东西，咋么办？答案是「靠抄」，抄之前要掌握人家为啥要这样实现，实现的原理是什么。

5、关键字

与 webpack 相关的关键字太多了，这些关键字对应的意义是什么。

6、配置文件

与 webpack 交互的核心依托于配置文件，目的是告诉 webpack 遇到不同的事情做不同的处理，分工明确。

这些知识都是我最近看《深入浅出 webpack》、 webpack 官方文档，webpack 源码总结的。如果你想看实体书，推荐下面这本：

今天打卡指令，分享你学习 webpack 的心得或学习资源。大家加油！

---

推荐阅读：

第 8 阶段前端动效结束，下一阶段内容预告