前端面试资料整理【工具篇】前端

webpack
处理包的原理 webpack打包原理

执行run 命令 [ 1. entry -> ast 编译（查询所有 import） -> 识别出 import 的相关引用，形成 dependency 树 -> 通过 loader 将代码转义，此步骤可忽略 -> ast 转义成 code -> 2. 执行 build 命令 [递归返回所以依赖 -> 返回依赖树 dependency] 3. 执行 generate 命令 [将依赖树回填至打包的代码中 bundle.js ] ]

es module 与 commonjs 的区别 es module 与 commonjs 的区别

cjs 是输出值的拷贝，esm 是输出值的引用
cjs 是运行是加载（export.module返回的是实际代码，顺序执行，阻塞执行），esm 是编译时输出接口（export 返回的是挂载在 webpack_require.d 上的 key）
cjs 是同步的，esm 是异步的。（因为其返回的不一样）

loader 与 plugin loader: 是决定如何处理文件，例如从 A 变成了 B。通常返回的是一段逻辑，代表如何处理文件。这段逻辑代码最后也会填入到打包文件中。
plugin: 是为了补充 webpack 的能力。依赖 webpack 提供的 api 进行操作，返回的是执行后结果。
resolve 处理解析的，常用的：

extension 解析文件的后缀，默认是 js,json
modules 解析的包路径，默认是 node_modules。
alias 省略部分解析的路径写法。

optimization 内置的优化，例如压缩、chunk打包。
其他

resolveLoader 处理 loader 解析方式

resolveLoader: { alias: { 'a-loader': path.resolve(__dirname, 'loaders/a.js') } }, module: { rules: [ { test: /\.js$/, use: 'a-loader', exclude: /node_modules/ } ] }, // 等价于 module: { rules: [ { test: /\.js$/, use: path.resolve(__dirname, 'loaders/a.js'), exclude: /node_modules/ } ] },

项目首屏加载优化