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

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

咱们常常会在各类文章中看到关于 webpack 的介绍：html

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

可是看完以后咱们一般仍是一脸懵逼，官方的描述对于不少 webpack 的初学者来讲太过于专业，致使你们并不能真正的了解到 webpack 究竟是干什么的。前端

因此在这篇文章，我尽可能用最简单的例子和描述，来给他们解释清楚，webpack 究竟是什么。jquery

前端资源

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

构建工具

那构建又是什么意思呢？咱们代码写好以后，为何还须要构建呢？
咱们来看一下下面这段代码：web

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

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

运行后会发现 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 是一个前端资源构建工具，是一个静态模块打包器。

会不会以为对这句话有了一些本身的理解了呢？