这是我参与「第四届青训营 」笔记创作活动的第2天

定义

webpack被定义为现代 JavaScript 应用程序的静态模块打包器(module bundler)，是目前最为流行的JavaScript打包工具之一。 webpack会以一个或多个js文件为入口，递归检查每个js模块的依赖，从而构建一个依赖关系图(dependency graph)，然后依据该关系图，将整个应用程序打包成一个或多个bundle。

四个核心参数

入口（entry）

一个应用程序可以有一个或多个入口，由entry属性指定，通常是一个对象。如果这个对象内只包含了一个入口，也可以简写为一个字符串（或字符串数组）。如：

上述配置定义src目录下的main.js为打包入口，webpack将从这个文件开始，构建整个项目的依赖关系图。

出口（output）也就是webpack的输出，由output属性定义。

与入口不同的是，一个应用程序只能有一个出口。出口是一个对象，包含两个属性：filename和path，分别定义打包结果的文件名和输出位置。如：

加载器（loader）

我们需要一些额外的代码帮助webpack识别css文件中的依赖。我们会编写一个函数，它将index.css读取为一个字符串，然后转化成js（注意，转化成js只是为了让webpack解析依赖关系，因此转化出的js与原css并不等价）输出出来，这样webpack就可以解析了。而这个用于转换的函数，就称为一个loader。

所以，一个加载器（loader）实际上就是一个将特定的字符串转化成JavaScript代码的函数。换个角度来说，一个loader就是一个字符串处理函数。

插件（plugin）

一个插件就是一个对webpack功能的定制或扩展。

loader的使用场景是有限的，它只能用来帮助webpack加载非js文件。如果我们想在webpack打包的任何一个过程中添加某些特定的功能，就需要借助插件来实现。它是webpack灵活性的一大体现，也是webpack的支柱功能，因为webpack自身就是构建于插件系统之上的。