第 9 阶段：搞懂、搞透前端构建第 1 天

对于前端新手来说，不能理解为啥前端要使用 webpack 进行打包。曾经，刚入门前端的时候我也有这个疑问。今天我来帮大家重新认识一下 webpack。

如果在很久以前，纯 HTML + CSS + JavaScript 开发，不需要打包工具，直接把写好的 HTML 丢到浏览器中，浏览器就会乖乖地给你显示出一个网页。而今天，时代变了，前端人开始做更多的尝试：

1、前端人不再用 css，而是用 Less、Sass、Stylus 这样的预处理语言；

2、前端人不再通过 JavaScript 「显式地」修改 DOM，他们开始使用各种框架，比如 Vue，React；

3、前端人开始尝试语言的新特性，比如 ES6、ES7，现在流行起来使用 TypeScript，可是这些新特性并不能够适用于所有的浏览器；

4、前端人为了让代码体积更小，他们开始对 CSS、JavaScript、HTML、图片等进行压缩处理；

5、项目越来越大，前端人开始追求模块化开发；

......

慢慢地，前端人为了使用更多的特性，每个特性都需要一个工具来处理，那要有多少工具呀！那为何不开发一个管理这些工具的工具呢？此时 webpack 出现了（当然在 webpack 出现之前经历了很多其它类似的工具），在我看来，它就是这样一个「工具集」，聚集了非常多的小工具。

webpack 说白了就是能够让一件事物从一种形态转变为另一种形态，就如下面的“小人人”一样，由三个小人最终转换成了一个大人：

从代码的角度来说，webpack 是能够把一种代码转换成另一种浏览器能够识别的代码，图中 a.js 引用了 b.js 和 c.js 最终经过 webpack 处理后变成了 index.js。通俗地讲，程序员写的代码文件如同鱼塘里的鱼，有金鱼、鲤鱼、草鱼等，webpack 相当于一个养殖员，等鱼儿长大后，他要对这些鱼进行处理，金鱼要卖到城市了，鲤鱼要卖到农村，草鱼留着自己吃。

市面上的小工具太多了，webpack 如何能够让这些小工具发挥它该有的作用呢？靠的是 loader 和 plugin，loader 相当于一个语言的翻译官，比如可以把 less 翻译成 css，把 TypeScript 翻译成 js；plugin 可以监听 webpack 在打包过程中发出的事件，比如 webpack 处理 suyan.js 这个文件时，会发出事件，plugin 可以接收到这个事件，对 suyan.js 这个文件进行处理。

webpack 在打包的时候，需要通过 webpack.config.js 这个文件告诉它，打包先从哪个文件开始，比如先从 index.js 文件开始，index.js 文件又引用了 a.js 和 b.js 文件，那么 webpack 在处理的时候会把 index.js 文件合并到一个文件中。最终需要一个 output（出口）告诉 webpack 把最终生成的文件要放到哪个地方。

总的来说，webpack 就是一个前端打包工具，它拥有非常多的小工具，可以把代码从开发模式变成线上模式，最终交给浏览器渲染。

本节内容从宏观的角度分析了 webpack 是什么，希望你对 webpack 有一个整体的认识。

欢迎打卡留言，打卡主题（一起讨论一起学）：
1、本文表述了在我眼中的 webpack，那么在你眼中的 webpack 是什么，表达一下你的观点；

2、挑战一下，用一句话说明什么是 loader，什么是 plugin；

大家加油！

推荐阅读：

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