1.概念
webpack 是一个js的静态模块打包器
会从入口文件开始，会递归查找所有依赖的文件，生成一个依赖的关系图谱，最终把每个依赖的模块打包成一个文件或多个文件。
默认只处理 js和json文件
entry 构建的入口
output 构建输出bundle的地址信息
mode 构建的环境
loader 除了js和json以外的，都需要loader特殊处理。
moudle 通过rlues 匹配对应的loader 来加载模块
plugins webpack打包过程中的钩子函数，可以注入特定的逻辑和改变结果。
plugins 打包执行流程：
拿到配置，初始化⼯作 最终配置
实例化⼀个compiler类，注册插件，对应的⽣命周期绑定相应的时间
执⾏编译，compiler.run //各阶段
compiler(构建阶段)->compilation(第七个阶段，bundle资源被加⼯成什么样⼦了)
递归处理所有的依赖模块 ⽣成chunk
把chunk输出到output指定的位置
babel-loader 是 把 es6 转es5 基础的语法，
babel/polyfill 解决不支持 es6的 新特性，如promise 方法
自定义loader loader就是一个函数，不断的把字符串传递加工的过程。
module.exports = function (source) {
return source.replace("webpack", "这是改的内容");
};
2.常用的插件
1.DefinePlugin
new webpack.DefinePlugin({
'process.env.RUN_TYPE': JSON.stringify(process.env.RUN_TYPE) } //定义运行
时变量 用于区分启动的方式
2.webpack-bundle-analyzer 生产诊断报告
3.compression-webpack-plugin 打包生成xxx.gz压缩文件，服务端nginx 配置gzip_static on
3.webpack 源码实现
- 解析webpack.config.js ，读取入口信息与出口信息
- 根据entry信息，进行依赖分析，与内容分析，从run()方法开始
- 依赖分析 (根据内容递归读取，所有模块与依赖的图谱)
- 内容分析(使用 babel/parser的parse方法，生成抽象语法树AST)
- 使用@babel/traverse的traverse方法遍历AST，配合ImportDeclaration钩子函数，得到依赖的dependencies的数组（主要保存如a.js 对应是相对路径../a.js）
- 使用@babel/core 的transformFromAst方法输出code代码字符串。
- 把code 整合到自执行匿名函数里面。
- 生成chunk (包括依赖管理，依赖图谱)
- 输出bundle文件 （同时补全生成需要的常用方法 module export s require）
4. 参考掘金
源码实现：webpack简单版 手写 https://juejin.cn/post/7003278292430094366
性能： webpack性能优化打包 https://juejin.cn/post/7004089708640731167#heading-22
webpack 打包导出公共库 https://juejin.cn/post/7004340117112356900
