webpack 原理 手写webpack

webpack的功能

1. 读取文件，然后生成一个新的文件，bundle.js
2. 前端不能使用require去读取文件，
3. 收集依赖，根据代码中的import,将所有需要的文件引入
4. 然后把es6转换成es5
5. 替换require和export

weppack 实现

1. 写一个用于commen.js规范的add
2. 写index.js
3. 改写为es6模式
4. 安装babel全家桶。用于生成ast树等

AST 语法树

1. 将string代码转换成树状结构
   • astexplorer.net
2. 转译器

vite原理

1. index.js 为es6的语法，script标签加上type=module是可以直接引用使用的
2. 然后并实现vue ts等的引入