webpack 是代码编译工具，有入口、出口、loader 和插件，是一个用于现代 JavaScript 应用程序的静态模块打包工具。
关于 webpack
webpack 的主要功能就是打包，通过配置对文件进行自动化处理（一般在 webpack.config.js 文件中配置），根据入口文件的配置，形成当前浏览器可用的代码，将不同的资源和文件进行打包，合并在一个文件中。
-
Entry 入口 指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
-
Output 输出 输出用于指定 webpack 打包后的资源 bundles 输出的位置、如何命名等
-
Loader 由于webpack 只能够理解 JavaScript、json，有了 Loader 就可以让 webpack 去处理非 JavaScript 文件，比如 css-loader、less-loader
-
Plugins 插件可以对打包功能进行优化、压缩，提高效率
5 Mode 模式(Mode)指示 webpack 使用相应模式的配置。
- development：让代码本地调试运行的环境
- production ：让代码优化上线运行的环境
具体细节可参考webpack 中文文档
安装
全局安装 webpack 时，如果出现版本问题，可以制定安装的版本
npm install webpack@版本号 --save-dev
配置
- 入口路径默认是 ./src/index.js，entry 属性可以指定一个（或多个）不同的入口
- 出口的两个属性，分别表示打包的目标文件夹，打包文件的名称
const path = require('path');
module.exports = {
entry: './src/main.js', //入口路径配置
output: { //出口配置
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
}
package.json 文件中配置快捷打包指令（一般都会默认包含）
webpack 打包的流程
webpack 打包的过程是串行的。
- 初始化参数 ： 首先从 webpack.config.js 文件中读取配置参数，与 shell 命令中传入的参数进行合并，合并后变成最终打包配置的参数。
- 开始编译准备 ： 调用 webpack() 函数，它会返回一个 compiler 函数，创建 compiler 对象并注册Webpack 插件，调用compiler.run() 进行编译。
- 模块编译 ： 调用匹配文件的 loaders，处理并分析模块依赖，递归进行模块编译。
- 完成编译 ： 在递归完成后，每个引用模块通过 loaders 处理，得到模块之间的相互依赖关系。
- 输出文件： 将处理后的文件输出到 ouput 配置的目录中。
