webpack 学习笔记（二）：webpack 简介

通过前面对 webpack 快速入门代码练习的学习，我们对 webpack 应该有了一个初步的印象。这篇文章，我们会更多的站在理论的角度来进一步学习：webpack 是什么？

我们经常会在各种文章中看到关于 webpack 的介绍：

webpack 是一个前端资源构建工具，是一个静态模块打包器。

但是看完之后我们通常还是一脸懵逼，官方的描述对于很多 webpack 的初学者来说太过于专业，导致大家并不能真正的了解到 webpack 到底是干什么的。

所以在这篇文章，我尽量用最简单的例子和描述，来给他们解释清楚，webpack 到底是什么。

前端资源

我们一直说 webpack 是一个前端资源构建工具，这里提到的“前端资源”，指的并不是什么前端资料、文档、博客等，而是在前端项目开发中所需要的 HTML、CSS、JS、图片等资源。前端资源构建，也是针对这些代码资源进行构建。

构建工具

那构建又是什么意思呢？我们代码写好之后，为什么还需要构建呢？
我们来看一下下面这段代码：

header {
    background-color: #cccccc;
    h1 {
        color: #3c3c3c;
    }
}

这是一段用 less 语法写的样式代码，我们在 .html 文件中引入并在浏览器中运行该代码：

运行后会发现 less 写的样式并没有生效，这是因为浏览器不能解析 less 的语法。

同样的道理，我们在webpack 学习笔记：快速入门一章中练习的代码，也是因为浏览器不能解析 ES6 的模块化语法导致浏览器报错。

所以，当我们在一个项目中，使用了这些浏览器不能识别的语法去写代码时，我们就需要借助一些工具来帮我们把代码转换成浏览器能够识别的语法。

例如：能将 less 转换为 css 的工具，将 ES6 转换为 ES5 的工具。如果还有其他语法的代码，可能还需要更多的工具。

这个时候，前端就提出了一个“构建工具”的概念，意思就是我们找一个大的工具，将这些小工具的功能都包含进来，开发者只需要学习这个大工具的使用就可以了。

而这个大工具，就是“构建工具”，webpack，就是构建工具的一种。

静态模块打包器

前面我们弄清楚了 webpack 是一个前端资源构建工具，那什么又是静态模块打包器呢？

所谓的静态模块打包器，就是 webpack 会将前端项目中的所有资源文件都当作模块处理，根据模块的依赖关系进行打包编译，最后生成一个能够在浏览器中正常运行的出口文件。

官网的图其实就是一个很好的解释。

我们再通过一个代码例子来帮助理解，有用过 Vue、React 等前端框架的同学可能会经常看到类似于下面这种的代码（没用过也不影响理解）：

// index.js
// 引入 js 资源
import $ from 'jquery';
import './a.js';
// 引入样式资源
import './b.css';
import './c.less';
// 引入图片、字体等资源
// ...

上面的代码中，我们在一个 index.js 文件中通过 import 引入了 .js、.css、.less 等多个文件。

我们将这个 index.js 文件作为项目的入口文件。webpack 会以入口文件为起点，将该文件中所有依赖的文件引入进来，形成一个代码块，我们称之为 chunk。在 chunk 里面，webpack 会对不同类型的代码分别进行编译处理，将代码都转换为浏览器能够解析的语法，最后将编译完成的代码输出。

这个例子中所有的代码文件，都是“静态模块”，而 webpack 编译这些模块的过程就是“打包”，最后编译完成输出的新文件我们称之为“出口文件”。

最后，我们再回过头来看看文章开头关于 webpack 的描述：webpack 是一个前端资源构建工具，是一个静态模块打包器。

会不会觉得对这句话有了一些自己的理解了呢？