Webpack 九浅一深系列（一）—— 概念梳理

[Hydraz320]

Webpack 九浅一深系列（一）—— 概念梳理

前言 TL,DR

笔者虽入行前端已有时日，但从纯小白走过来的日子仍历历在目。随着工作经历的不断增加，愈发感到前端工程师的技能树真是枝杈略多，难成系统主干。过去靠小聪明和运气博得些 offer，可自己真的算是一个合格的前端工程师了吗？

从学习本身的客观规律上讲，对一块知识形成系统化认知才算是「学会」。审视自身所学，不免惶惶。因此，本系列就是个踏踏实实的整体梳理与部分深入，旨在扎扎实实将一个前端工程师应有的技能「熟悉」（好孩子不要简历中写「掌握」哟）。于笔者而言，愿起到温故知新、查缺补漏之效；于读者而言，也愿各取所需，有所收获。

古语有云：开局有高度，学习不糊涂。本篇旨在 Webpack 学习过程的开始阶段，从宏观角度构建起 Webpack 的知识结构。后续学习到的每一块知识，每一点细节，都能在结构上有所对应，这样也就能取得较好的效果。

正文开始。

What & Why

Webpack 是什么呢？官方文档解释为静态模块打包器，当然这个解释更像是早起的 Webpack，如今其功能已经更为广泛而强大。当然，文档的意思是说，Webpack 就是将我们的前端资源（代码、样式、依赖的三方包、图片、字体等等）根据模块之间的依赖关系，按照我们想要的方式整合成一个或多个 bundle。打包的过程中，我们可能会做一些编译，可能会将代码拆分成若干 chunk，可能会压缩代码，可能会针对生产环境的进行优化。总的来说，Webpack 是目前最为流行的打包工具，可以很好的满足我们构建应用的需要。

虽然从零到一搭建一个 Webpack + xxx + yyy 的文章很多，但自己搞一遍其实还是需要了解多方面的知识的。不过没关系，著名的 create-react-app 可以迅速搭建起一个项目，其内部就是借助了 Webpack 的能力，通过 npm run eject 命令就可以看到其实际的配置。

如果还不是很清晰，那或许你需要了解下什么是模块规范，过去到现在 JavaScript 文件的组织方式经历了怎样的变化。不过这些并不是本文的重点，我们可以在许多文章中看到类似的发展历史。笔者自己入行仍短，许多 AMD、CMD 的东西也只是很早的时候用过一用，就不多说了。