webpack基础知识

Webpack 核心概念：
Entry（入口）：Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
Output（出口）：指示 webpack 如何去输出、以及在哪里输出
Module（模块）：在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk（代码块）：一个 Chunk 由多个模块组合而成，用于代码合并与分割。
Loader（模块转换器）：用于把模块原内容按照需求转换成新内容。
Plugin（扩展插件）：在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件，并改变输出结果

webpack 一切皆模块，配置项 Module，定义模块的各种操作，
Module 主要配置：
loader： 各种模块转换器
extensions：使用的扩展名
alias：别名、例如：vue-cli 常用的 @ 出自此处

plugins: 插件列表
devServer：开发环境相关配置，譬如 proxy
externals：打包排除模块
target：包应该运行的环境，默认 web

Webpack 执行流程
webpack从启动到结束会依次执行以下流程：
初始化：解析webpack配置参数，生产 Compiler 实例
注册插件：调用插件的apply方法，给插件传入compiler实例的引用，插件通过compiler调用Webpack提供的API，让插件可以监听后续的所有事件节点。
入口：读取入口文件
解析文件：使用loader将文件解析成抽象语法树 AST
生成依赖图谱：找出每个文件的依赖项（遍历）
输出：根据转换好的代码，生成 chunk
生成最后打包的文件

主要功能
语法转换
通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
源码转换 (codemods)
主要模块
@babel/parser：负责将代码解析为抽象语法树
@babel/traverse：遍历抽象语法树的工具，我们可以在语法树中解析特定的节点，然后做一些操作
@babel/core：代码转换，如ES6的代码转为ES5的模式

Webpack 打包结果
在使用 webpack 构建的典型应用程序或站点中，有三种主要的代码类型：
源码：你或你的团队编写的源码。
依赖：你的源码会依赖的任何第三方的 library 或 “vendor” 代码。
管理文件：webpack 的 runtime 使用 manifest 管理所有模块的交互。
runtime：在模块交互时，连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。
manifest：当编译器(compiler)开始执行、解析和映射应用程序时，它会保留所有模块的详细要点。这个数据集合称为 “Manifest”， 当完成打包并发送到浏览器时，会在运行时通过 Manifest 来解析和加载模块。无论你选择哪种模块语法，那些 import 或 require 语句现在都已经转换为 webpack_require 方法，此方法指向模块标识符(module identifier)。通过使用 manifest 中的数据，runtime 将能够查询模块标识符，检索出背后对应的模块。
其中：
import 或 require 语句会转换为 webpack_require
异步导入会转换为 require.ensure（在Webpack 4 中会使用 Promise 封装）