共计 1286 个字符，预计需要花费 4 分钟才能阅读完成。
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 是一个前端资源构建工具，那什么又是动态模块打包器呢？
有学过 Vue、React 等前端框架的同学可能会常常看到相似上面这种的代码：
// index.js
// 引入 js 资源
import $ from 'jquery';
import './a.js';
// 引入款式资源
import './b.css';
import './c.less';
// 引入图片、字体等资源
// ... 下面代码在一个 index.js 文件中引入了所有的资源，这个 index.js 文件咱们也称之为入口文件。
webpack 会以入口文件为终点，将该文件中所有依赖的文件引入进来，造成一个代码块，咱们称之为 chunk。在 chunk 外面，webpack 会对不同类型的代码别离进行编译解决，将代码都转换为浏览器可能解析的语法，最初将编译实现的代码输入。
所有的代码文件，咱们就将其称之为“动态模块”，编译这些模块的过程咱们称之为“打包”，最初编译实现输入的文件咱们称之为“进口文件”。
所谓的动态模块打包器，就是 webpack 会将前端我的项目中的所有资源文件都当作模块解决，依据模块的依赖关系进行动态剖析，最初打包生成一个可能在浏览器中失常运行的进口文件。