type
status
date
slug
summary
tags
category
icon
password
记录一些前端工程化的面经知识点
Webpack 与 Grunt、Gulp 的不同
Webpack 是基于 模块化 的打包工具，自动化处理模块。它会把一切都当成模块，然后在处理时递归地构建一个依赖关系图，其中包括所需要的各种模块，然后将模块打包成一个或多个
bundle。Grunt 和 Gulp 是基于 任务运行 的打包工具，会自动执行指定的任务，像流水线一样，把资源放上去然后加工。它们有活跃的社区和丰富的插件，方便打造各种工作流。
Webpack、Rollup、Parcel 优劣
- Webpack：适用于 大型的复杂项目，有强大的
loader和plugin生态。打包后的文件是一个立即执行函数，接收的参数是模块对象，键为模块路径，值为模块内容。
- Rollup：适用于 基础库的打包，如
vue、d3等。vite的底层就是使用rollup实现的。rollup将各个模块打包到一个文件中，并通过tree-shaking来删减无用代码，减少代码体积。但没有 Webpack 的如代码分割、按需加载等高级功能。
- Parcel：适用于 简单的实验性项目，可以满足低门槛的快速效果。缺点是生态差、报错信息不全，适用于玩具型项目或实验项目。
常见的 Loader
file-loader：把文件输出到一个文件夹中，在代码中通过相对URL引用输出的文件
url-loader：与file-loader类似，但是能在文件很小的情况下把文件通过base64方式注入到代码中
source-map-loader：加载额外的 Source Map 文件，以方便断点调试
image-loader
babel-loader: 把ES6转化为ES5
css-loader
style-loader
eslint-loader
注意：在 Webpack 中，loader 的执行顺序是从右到左。
常见的 Plugin
define-plugin：定义环境变量
html-webpack-plugin：简化 HTML 文件创建
mini-css-extract-plugin：将 CSS 提取到单独的文件中，支持按需加载
Bundle, Chunk, Module 的区别
- Bundle 是 Webpack 打包出来的 文件。
- Chunk 是 代码块，一个
chunk由多个模块组成。
- Module 是开发中的单个 模块。
Loader 和 Plugin 的不同
- Loader 是加载器。Webpack 将一切文件都视为模块，但原生只能解析
js文件。如果要打包其他文件，就需要loader来处理。
- Plugin 是插件。它可以扩展 Webpack 的功能，拥有更多的灵活性。Webpack 的生命周期中会广播出很多事件，插件可以监听这些事件，在合适的时机调用 API 改变结果。
不同的用法：
loader在module.rules中配置，说明是模块的解析规则。类型是数组，每一项是一个对象，描述了什么样的文件 (test) 用什么加载器 (loader) 和使用的参数 (options)。
plugin在plugins中单独配置。类型是数组，每一项是一个plugin实例，参数通过构造函数传入。
Babel 的原理是什么
- 解析 (Parse)：将代码解析生成抽象语法树 (AST)，即词法分析和语法分析。
- 转换 (Transform)：对于 AST 进行变换一系列的操作。
babel接收 AST 并通过babel-traverse进行遍历，在操作中进行添加、更新和移除等操作。
- 生成 (Generate)：将变换后的 AST 再转换为 JS 代码，使用模块
babel-generator。
Git 和 SVN 的区别
- 最根本的区别：
git是 分布式 的，svn是 集中式 的。因此如果服务器离线，就不能使用svn。
svn的分支是整个版本库的复制的一份完整目录，git的分支是指向某次提交，开销更小且不会影响其他人。
svn指令比git简单、好上手。
git把内容按照元数据存储，svn是文件。
git分支和svn分支不同，svn会发生分支遗漏。
git没有全局版本号，svn有。
git内容完整性比svn强，使用SHA-1哈希算法，确保代码完整性，降低磁盘故障、网络问题对版本库的破坏。
经常使用的 git 命令？
git pull 和 git fetch 的区别
git fetch 只是将远程仓库的变化下载下来，并没有和本地分支合并。git pull 会将远程仓库的变化下载下来，并和当前分支合并。git rebase 和 git merge 的区别
都是用于合并分支，但是在
commit 的处理上有不同git merge 是新建一个 commit 对象，然后找到两个文件的记录，让两个文件的下一个记录都指向这个新的 commit，这样可以保留之前每个 commit 的记录git rebase 是先找到两个分支第一个共同 commit 的祖先记录，然后提取当前分支的要提交的记录，然后合并给主分支之后，这样分支的提交记录就是线性的了