这是我参与「第四届青训营 」笔记创作活动的第8天
Weboack
什么是Webpack
webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
主要功能
其天生就代码分割、模块化，webpack2.0中加入tree shaking，用来提取公共代码，去掉死亡代码。
运行环境
webpack 5运行于Node.js v10.13.0+的版本
使用Webpack
安装
在安装 Webpack 前，本地环境需要支持node.js。
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令cnpm。
使用 cnpm 安装 webpack：
cnpm install webpack -g
创建项目
接下来我们创建一个目录 app：
mkdir app
在 app 目录下添加 runoob1.js 文件，代码如下：
app/runoob1.js 文件
document.write("It works.");
在 app 目录下添加 index.html 文件，代码如下：
app/index.html 文件
`
webpack 根据模块的依赖关系进行静态分析，这些文件(模块)会被包含到 bundle.js 文件中。Webpack 会给每个模块分配一个唯一的id并通过这个id索引和访问模块。 在页面启动时，会先执行runoob1.js 中的代码，其它模块会在运行 require 的时候再执行。
关于webpack 的使用方法，基本都围绕·配置-展开，而这些配置大致可划分为两类:
- 流程类:作用于流程中某个。r若干个环节，直接影响打包效果的配置项
- 工具类:主流程之外，提供更多工程化能力的配置项
