什么是 webpack，有什么用？
webpack 就是一个打包工具，宗旨是一切静态资源皆可打包，分析项目结构，找到JS模块以及浏览器不能直接运行的拓展语言，并使用转译工具将其转译，最终打包为合格的格式供浏览器使用
核心概念
- entry 入口：webpack 使用该文件模块作为打包入口，构建内部依赖图，进行递归。找出所有依赖的模块，并使用相应的 loader 进行转译
- output 出口：最终输出结果的文件，默认为 ./dist
- loader：将所有类型的文件转换成 webpack 能够有效处理的文件，常用的有
babel-loader,sass-loader,css-loader,style-loader,vue-loader,file-loader,url-loader; - plugin：插件，用来增强 webpack 功能，一种强大的扩展；
- module：模块，esm / cjs 模块规范，一个模块对应一个文件；
webpack 打包过程
webpack 启动后会在 entry 里配置的 module 开始递归解析入口文件所依赖的模块，每找到一个模块，就会根据 webpack.config.js 配置文件里的规则使用相应的 loader 进行转换，然后再解析当前模块依赖的模块，这些模块会以其 entry 进行分组，一个 entry 和所依赖的模块就构成了一个 chunk，最后 webpack 会把所有 chunk 转换为文件输出，必要时会使用插件来协助打包。
loader
不同的 loader 会有不同的功能，但是主要功能都是用来转换和处理代码，配置规则：
test: 匹配规则，使用正则来判断文件后缀名
use: 使用的 loader 名称，
options: 为 loader 进行配置选项（非必须）
plugin
插件使用需要先进行安装，在配置文件里使用 new 关键字配置生成插件常用插件有：
-
HtmlWebpackPlugin：自动生成index.html并且自动引入 js 文件，可用来做长缓存（持久缓存）； -
HotModuleReplacement: 实时热更新插件； -
cleanWebpackPlugin: 每次构建时自动清理 dist 目录
webpack 打包优化
优化打包体积
- 使用 uglyfy 进行代码压缩，多入口情况下使用 commonsChunk 分离第三方代码
- 按需加载，代码压缩，代码分割（code splitting）,CDN 优化，gzip 加速
- Tree-shaking 过滤多余的代码
HMR 原理
基于 webpack-dev-server
- 第一步：webpack 对文件系统进行 watch 打包到内存中
- 第二步：文件发生改变，webpack-dev-server 监听到变更，找到相应的模块，；
- 第三步：webpack-dev-server 将变更的模块通知到浏览器，在服务器与浏览器之间建立了一个 webSocket 长链接，来与浏览器进行交流；
- 第四步：浏览器根据 websocket 接收到 hash，重新请求更新模块的 chunk
- 最后，浏览器加载 chunk ,并使用新模块代替旧模块，删除之前的缓存。
tree shaking
tree-shaking 直译“摇树”，你可以将应用程序想象成一棵树。绿色表示实际用到的 source code(源码) 和 library(库)，是树上活的树叶。灰色表示未引用代码，是秋天树上枯萎的树叶。为了除去死去的树叶，你必须摇动这棵树，使它们落下。
通常用于移除 JS 文件上下文中未被引用的代码块
原理：基于 esm 模块进行静态分析，通过 AST 将用不到的代码移除，从而减小打包体积。
