webpack用途
webpack是一个打包器（现代javascript应用程序的静态模块打包器）。
当webpack处理应用程序时，递归的构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundle。
四个核心概念
1）、入口（entry）
2）、输出（output）
3）、loader
4）、插件（plugins）
1、入口（entry）
入口起点指示webpack应该使用哪个模块来作为构建其内部依赖图的开始；
进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的；
每个依赖项随即被处理，最后输出到称之为bundles的文件中。
通过在webpack配置中配置entry属性，可以指定一个或多个入口起点。默认值为./src
单个入口起点
对象语法
2.出口（output）
出口告诉webpack在哪里输出它所创建的bundles,以及如何命名这些文件，默认值为./dist
3.loader
loader让webpack能够去处理那些非javascript文件（webpack自身只理解JavaScript）
loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后就可以利用webpack的打包能力，对它们进行处理。
本质上，webpack loader将所有类型的文件，转换为应用程序的依赖图（和最终bundle）可以直接引用的模块。
在webpack的配置中，loader有两个目标
test属性，用于标识出应该被对应的loader进行转换的某个或某些文件
use属性，表示进行转换时，应该使用哪个loader
loader配置在module.rules中
4.插件（plugins）
loader被用于转换某些类型的模块，而插件可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。
想要使用一个插件，只需要require（）它，然后把它添加到plugins数组中。
////////////////////////////////////////////////////////////
补充：
context
context是webpack编译时的基础目录，入口起点entry会相对于此目录查找。
默认值为当前目录。
context应该配置为绝对路径，假如入口起点为src/main.js,则可以配置
{
context:path.resolve('./src),
entry:'.main.js'
}
此时 entry 不能再配置为'./src/main.js'，因为 webpack 会相对于 context 配置的 src 目录区查找入口起点（main.js），而 main.js 就在此目录下，所以应当将 entry 配置为当前目录（./）。
context 有什么实际作用？官方文档的解释是使得你的配置独立于工程目录 「This makes your configuration independent from CWD (current working directory)」。怎么理解？举个例子，在分离开发生产配置文件时候，一般把 webpack.config 放到 build 文件夹下，此时 entry 却不用考虑相对于 build 目录来配置，仍然要相对于 context 来配置，这也就是所谓的独立于工程目录。
需要注意的是，output 的配置项和 context 没有关系，但是有些插件的配置项和 context 有关，
