在线电影订票系统

什么是Webpack

Webpack是针对现代JS应用的打包工具。它在处理时，会递归地建立一张依赖图。该依赖图包含了应用中需要的所有关联模块，Webpack会将这些模块打包成很小的文件（通常是一个文件）。这样，当我们浏览网页（从服务器获取数据）时，需要的文件大小就大大减小，响应时间自然也就减少。如下图：

---

Webpack的核心概念

只要理解了Webpack的4个核心概念，配置就会变得非常简单。这4个核心概念为：

1. Entry
2. Output
3. Loaders
4. Plugins

1. Entry

上面已经说到了，webpack会创建整个应用的依赖图。那么，这个依赖图就需要有一个“入口”，也可以理解为起始点。根据这个起始点，webpack可以找到所有的依赖文件，并根据依赖图将这些文件打包起来。这个起始点就是Entry，就是一个入口文件（或根文件）。

在Webpack配置文件中，通过entry属性来定义。在我的电影订票系统中，如下：

webpack.base.conf.js

除了上面讲到的，webpack还提供了其它多种声明entry属性的方法，包括打包成多个文件、分类打包等。这些在官方文档中都可以查到。

2. Output

当所有文件都打包好后，还需要告诉webpack，要将这些打包好的资源存到哪个文件中。这就是output属性的功能：指定输出文件路径，文件名称以及输出过程中的哈希处理等。

webpack.base.conf.js

在我的电影订票系统中，使用到了output.path、output.filename以及output.publicPath三个属性，指定了打包文件存储路径以及assets的公共路径。
此外，output还有许多其他的属性，在官网中也可查到。

Loaders

Loader可以说是webpack的灵魂所在了。
在处理各个关联文件时，webpack把每个关联文件都当做是一个模块。但是，webpack本身只“懂”Javascript，对于其他的文件，如.css，.html，.jpg，.vue等，单靠webpack是无法处理的。这就是Loader的作用了。
在将文件加入依赖图时，Loaders可以将这些文件转换为模块。
在webpack的配置文件中，Loader的目标有2个：

1. 识别文件，确定哪些文件该用哪种loader来转换；（test属性）
2. 转换文件，使得这些文件可以被添加进依赖图。（loader属性）

webpack.base.conf.js

上图为我的电影订票系统中用到的loaders。以vue-loader为例。test属性告诉webpack，当处理require和import中的.vue文件时，先使用vue-loader将该文件转换，再加入打包文件中。

这些各种各样的loaders，很多官方都会提供，比如vue。还有些是网上都会开源的，很容易就可以找到。也可以直接利用npm进行安装。

Plugins

Loaders是在每个文件的基础上来进行转换的，而plugins在大多数情况下是在打包文件的“编译文件”或者是“块”中执行特定动作和功能的。Webpack的插件系统是很有用且可定制的。

使用插件时，只需要通过require()获取该插件，并将其添加到plugins数组中。通常情况下，由于可能会多次用到该插件，我们会创建一个该插件的实例，以便多次使用。

webpack.prod.conf.js

webpack官方有提供许多插件，有些插件是非常有用的（通常是必需的），如UglifyJS插件。关于这些插件的用处在官网都可以看到。