webpack打包流程

更新时间:2023-06-30 15:01:04 阅读: 评论:0

webpack打包流程
在前端⼯程化中,⼤家⽤得⽐较多的就是webpack了,今天就总结⼀下webpack打包流程。⾸先给⼀个⽬录结构
src
add.js:求和
minus.js:求差
index.js:⼊⼝⽂件
bundle.js:打包⽂件的js代码
//有⼈知道那种⽂件⽬录是如何弄的么?知道的,请给我留⾔,⾮常感谢!
bundle.js代码:
// ⽂件读取
const fs =require('fs')
// ⽂件解析成AST
const parr =require('@babel/parr')
比的认识知识点// AST中收集依赖
const traver =require('@babel/traver').default
// 路径拼接
怎么退出全屏const path =require('path')
// ES6=>ES5
const babel =require('@babel/core')
const getModuleInfo=(file)=>{
// file:⼊⼝⽂件
// 获取⽂件的⽬录
const abPath = path.dirname(file)
console.log('获取⽂件的⽬录:', abPath);
// readFileSync:可以不⽤回调函数,如果⽤readFile需要定义回调函数。
// 拿到⽂件内容
const body = fs.readFileSync(file,'utf8')
console.log('⽂件内容', body);
// 解析⽂件内容构建成AST语法树,主要是得到⽂件的路径依赖关系凤凰男是啥意思
const AST= parr.par(body,{
sourceType:'module'
// 表⽰我们解析的是ES6模块
})
/
/ 节点数组,在value中存放着路径信息
笑着流泪
console.log(AST.program.body);
// 收集当前⽂件所依赖的⽂件地址
const deps ={}
写给老师的寄语
traver(AST,{
ImportDeclaration({ node }){
// 将当前节点的路径依赖存进deps中
// mac电脑:const p1 = './' + path.join(abPath, node.source.value)
const p1 ='.\\'+ path.join(abPath, node.source.value)
deps[node.source.value]= p1
}
})
console.log('⽂件依赖:', deps);
声音放大// babel转化
const{ code }= ansformFromAst(AST,null,{
prets:['@babel/pret-env']
})
不断的英文
console.log(code);
}
getModuleInfo('./src/index.js')
结果如图
显然,我们可以得到⽂件的依赖信息,并做了代码转化,所以我们后⾯要做的就是对我们所导⼊的⽂件进⾏递归解析,这⾥就不赘述了,原理上是差不多的。
总结: webpack打包流程可以简单概括为
1、读取⼊⼝⽂件;景区限行
2、分析⼊⼝⽂件,得到其所依赖的⽂件信息;
3、递归读取每个⽂件的依赖信息,⽣成AST树,得到关系依赖图;
4、代码转化,⽣成ES5代码

本文发布于:2023-06-30 15:01:04,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/82/1070387.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:依赖   路径   解析   打包   内容   构建
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图