写在开头
前两天在知乎看到过一篇文章,大致意思是讲:字节跳动已经开始“弃用Webpack”,尝试在自研构建工具中使用类似Vite的ESmodule构建方式。
引起下方一大片焦虑:
- Webpack是不是要被取代了?现在学Vite就行了吧
- Webpack还没学会,就又来新的了!
甚至有人搬出了去年尤大所发的一个动态:再也回不去Webpack了。
PS:最近的vite比较火,而且发布了2.0版本,vue的作者尤雨溪也是在极力推荐
全方位对比vite和webpack
webpack打包过程
1.识别入口文件
2.通过逐层识别模块依赖。(Commonjs、amd或者es6的import,webpack都会对其进行分析。来获取代码的依赖)
3.webpack做的就是分析代码。转换代码,编译代码,输出代码
4.最终形成打包后的代码
webpack打包原理
1.先逐级递归识别依赖,构建依赖图谱
2.将代码转化成AST抽象语法树
3.在AST阶段中去处理代码
4.把AST抽象语法树变成浏览器可以识别的代码, 然后输出
重点:这里需要递归识别依赖,构建依赖图谱。图谱对象就是类似下面这种
{
'./app.js':
{
dependencies: {
'./test1.js': './test1.js' },
code:
'"use strict";\n\nvar _test = _interopRequireDefault(require("./test1.js"));\n\nfunction _interopRequireDefault(obj) {
return obj && obj.</