webpack构建流程｜打包原理
webpack 构建流程
Webpack 的运行流程是一个串行的过程,这个过程核心完成了 内容转换 + 资源合并 两种功能，实现上包含三个阶段：
初始化阶段：
- 初始化参数：从packge.json配置文件和Shell 语句中读取与合并参数,得出最终参数
- 创建编译器对象：用上一步得到的参数初始化
Compiler对象，加载所有配置的插件，执行run方法 - 确定入口：从中的
entry找出所有入口文件
构建阶段：
- 编译模块：从入口文件出发，调用所有配置的
Loader对模块进行翻译，翻译成js标准内容，将其转换成AST语法树，从AST中找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了Loader的处理 - 完成模块编译：使用
Loader翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系图
生成阶段：
- 输出资源：根据入口和模块之间的依赖关系,组装成一个个包含多个模块的
Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会。 - 输出完成：根据配置确定输出的路径和文件名,把文件内容写入到文件系统。
在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件Plugins在监听到感兴趣的事件后会执行特定的逻辑
关键技术名词：
Entry：编译入口，webpack 编译的起点
Compiler：编译管理器，webpack 启动后会创建 compiler 对象，该对象一直存活知道结束退出
Compilation：单次编辑过程的管理器，比如 watch = true 时，运行过程中只有一个 compiler 但每次文件变更触发重新编译时，都会创建一个新的 compilation 对象
Dependence：依赖对象，webpack 基于该类型记录模块间依赖关系
Module：webpack 内部所有资源都会以“module”对象形式存在，所有关于资源的操作、转译、合并都是以 “module” 为基本单位进行的
Chunk：编译完成准备输出时，webpack 会将 module 按特定的规则组织成一个一个的 chunk，这些 chunk 某种程度上跟最终输出一一对应
Loader：资源内容转换器，其实就是实现从内容 A 转换 B 的转换器
Plugin：webpack构建过程中，会在特定的时机广播对应的事件，插件监听这些事件，在特定时间点介入编译过程
初始化参数。初始化pakage。
，json和shell命令行输入的参数。将参数合并闯入complier编译器初始化complier编译器，合并的参数传入complier，执行comlier的run方法，确定入口文件entry，构建变异，从入口文件碍事将其用babel转换成ast抽象语法书，从ast结构中找到入口文件的依赖，递归ast手机他的依赖，是入口所有以来文件都经过loader转化。。。。make变异从入口文件调用所有loader对队模块进行翻译，再找出模块以来的模块通过递归确保所有的模块都经过loader的翻译，翻译出的最终内容将其转化为ast，然后手机他的依赖关系
实践加深理解,撸一个简易 webpack
几个babel包：
@babel/parser：用于将源码生成AST@babel/traverse：对AST节点进行递归遍历babel-core/@babel/preset-env：将获得的ES6的AST转化成ES5
parser.js中主要就三个方法：
getAST： 将获取到的模块内容 解析成AST语法树getDependencies：遍历AST，将用到的依赖收集起来transform：把获得的ES6的AST转化成ES5
定义 Compiler 类
初始化和构建阶段：
初始化阶段将配置合成参数并创建compiler对象(逻辑链路很长，省略)。
构建阶段：
定义compiler类，解析入口文件，调用loader将各类资源类型转译为javascript，调用balbel/parser将模块解析为ast，
用babel/tarverse遍历ast，遍历中会识别require/import等语句，收集模块之间的依赖，
将ast语法树转换为浏览器可以运行的代码，babel/core和@babel/preset-env将es6转es5，递归解析所有依赖项，生成依赖关系图
//超简易版webpack 构建：
const fs = require('fs')
const path = require('path')
const options = require('./webpack.config')
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const { transformFromAst } = require('@babel/core')
const Parser = {
getAst: path => {
// 读取入口文件
const content = fs.readFileSync(path, 'utf-8')
// 将文件内容转为AST抽象语法树
return parser.parse(content, {
sourceType: 'module'
})
},
getDependecies: (ast, filename) => {
const dependecies = {}
// 遍历所有的 import 模块,存入dependecies
traverse(ast, {
// 类型为 ImportDeclaration 的 AST 节点 (即为import 语句)
ImportDeclaration({ node }) {
const dirname = path.dirname(filename)
// 保存依赖模块路径,之后生成依赖关系图需要用到
const filepath = './' + path.join(dirname, node.source.value)
dependecies[node.source.value] = filepath
}
})
return dependecies
},
getCode: ast => {
// AST转换为code
const { code } = transformFromAst(ast, null, {
presets: ['@babel/preset-env']
})
return code
}
}
class Compiler {
constructor(options) {
// webpack 配置
const { entry, output } = options
// 入口
this.entry = entry
// 出口
this.output = output
// 模块
this.modules = []
}
// 构建启动
run() {
// 解析入口文件
const info = this.build(this.entry)
this.modules.push(info)
this.modules.forEach(({ dependecies }) => {
// 判断有依赖对象,递归解析所有依赖项
if (dependecies) {
for (const dependency in dependecies) {
this.modules.push(this.build(dependecies[dependency]))
}
}
})
// 生成依赖关系图
const dependencyGraph = this.modules.reduce(
(graph, item) => ({
...graph,
// 使用文件路径作为每个模块的唯一标识符,保存对应模块的依赖对象和文件内容
[item.filename]: {
dependecies: item.dependecies,
code: item.code
}
}),
{}
)
}
build(filename) {
const { getAst, getDependecies, getCode } = Parser
const ast = getAst(filename)
const dependecies = getDependecies(ast, filename)
const code = getCode(ast)
return {
// 文件路径,可以作为每个模块的唯一标识符
filename,
// 依赖对象,保存着依赖模块路径
dependecies,
// 文件内容
code
}
}
// 重写 require函数,输出bundle
generate() {}
}
new Compiler(options).run()
几个问题：
Webpack 编译过程会将源码解析为 AST 吗？webpack 与 babel 分别实现了什么？
构建阶段会读取源码，解析为 AST集合，Webpack 读出 AST 之后仅遍历 AST 集合并收集他们之间的依赖；babel 则对源码做等价转换，parse、tarverse、babel/core和@babel/preset-env生成浏览器可运行的代码，module => ast => dependences => module。
Webpack 编译过程中，如何识别资源对其他资源的依赖？
Webpack 遍历 AST 集合过程中，识别 require/ import 之类的导入语句，确定模块对其他资源的依赖关系
生成阶段：
生成阶段则围绕 chunks 展开，seal 函数主要完成从 module 到 chunks 的转化，根据构建阶段得到的模块依赖关系图，将 module 按 entry/动态引入 的规则分配给不同的 Chunk 对象；
entry及 entry 触达到的模块，组合成一个chunk- 使用动态引入语句引入的模块，各自组合成一个
chunk
// 重写 require函数 (浏览器不能识别commonjs语法),输出bundle
generate(code) {
// 输出文件路径
const filePath = path.join(this.output.path, this.output.filename)
const bundle = `(function(graph){
function require(module){
function localRequire(relativePath){
return require(graph[module].dependecies[relativePath])
}
var exports = {};
(function(require,exports,code){
eval(code)
})(localRequire,exports,graph[module].code);
return exports;
}
require('${this.entry}')
})(${JSON.stringify(code)})`
// 把文件内容写入到文件系统
fs.writeFileSync(filePath, bundle, 'utf-8')
}
参考：
https://juejin.cn/post/6844904038543130637#heading-15
https://juejin.cn/post/6949040393165996040