本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
个人抽象地将webpack理解成某医院的整容科，当webpack有业务的时候，它会有一条完整的流程，其中包含整容过程中的每一个步骤，然后所有步骤进行完之后，整容就完成了。。。
从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：
- 入口（entry）
- 出口（output）
- loader
- 插件（plugins）
意思很明显，整容的步骤，从医院进去再出来就好了，具体步骤咱往下看。
入口（entry）
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
入口嘛，当然第一步是进医院，进来之后告诉医院我要整容，于是医院会立马找出所有跟整容有关的科室。
可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。
module.exports = {
entry: './path/to/my/entry/file.js'
}
出口（output）
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。
const path = require('path');
module.exports = {
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-beauty-face.bundle.js'
}
}
这个就更好理解了，默认整容部位是脸上，但是你也可以选择其他地方整一下，并且结束后你要给这次整容取个名字（？？有点奇怪）。
loader
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
这个也不难理解，最初的整容可能只是割一下双眼皮，再隆个鼻子，但是架不住客户满脸的痣（我是不是也应该去整一下？），还得祛痣是不是？再来个脸上有块胎记的，这个更难了。好吧，既然这样只能寻求合作了，于是诞生了loader，这个loader可厉害了，不仅能解决上面说的痣和胎记，还能颧骨整形、下颌磨削、注射除皱等等等等，只要你有需求，我都能找到合适的loader帮你解决，那么这时候你可能觉得这么多服务太贵了，我不需要那么多项目，或者我想便宜点。
在更高层面，在 webpack 的配置中 loader 有两个目标：
test属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。use属性，表示进行转换时，应该使用哪个 loader。
好家伙，这服务还是挺周到了，不会强制消费，你可以选择需要整容哪些地方，甚至还能选择用哪家loader去磨削一下你的下巴，客户直呼良心商家。
module.exports = {
module: {
rules: [
{ test: /^\.ugly$/, use： 'beauty-loader'}
]
}
}
这意思就是，嘿webpack，只要有丑的地方，都用beauty-loader给我整一下。
重要的是要记得，在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules。然而，在定义错误时 webpack 会给出严重的警告。为了使你受益于此，如果没有按照正确方式去做，webpack 会“给出严重的警告”
以上文件格式和loader插件纯属虚构，如有雷同纯属不可能
插件（plugins）
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
好嘛，服务越来越周到了，前面loader提供了各种各样的整容部位和方式，这下又杀出个更厉害的插件。可能医院觉得，东拼西凑的整容最后的效果可能并不好，所以又引入了插件服务，比如完美契合多部位整容（打包优化）等等。而使用方法和loader很相似：
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
module.exports = {
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
}
不得不说一句，这服务真是太周到了。
模式
通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化
module.exports = {
mode: 'production'
};
当然可能有的人长得实在一言难尽，一次整容都不一定整得好，这咋整？没关系，我们都为你想好了，在您整容满意之前，您都可以选择开发阶段，顾名思义就是可以通过各种手段先整起来，等最后出院的时候去掉各种杂七杂八的配置改成最终的生产阶段。
总结
webpack的几个核心概念：1. 入口 2. 出口 3. loader 4. 插件 。另外还有一个mode了解一下。 大致功能就是入口决定webpack打包的最初的入口文件（js文件），打包过程中可能出现css等其他类型文件，这时候需要去用不同的loader处理不同类型的文件，打包结束前可能觉得需要优化一下或者其他一些功能，于是引入各种插件，最终打包生成后定义输出的文件名和地址。
概念其实没必要搞那么复杂，只不过看这个教程的时候突然就想到的，权当看个乐子
