31.说一说 webpack 的构建流程是什么？
⚫ 初始化流程：
◼
从配置文件和 Shell 语句中读取与合并参数
◼
初始化需要使用的插件和配置插件等执行环境所需要的参数
⚫ 编译构建流程：
◼
从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容
◼
再找到该 Module 依赖的 Module，递归地进行编译处理
⚫ 输出流程：
◼
对编译后的 Module 组合成 Chunk，
◼
把 Chunk 转换成文件，输出到文件系统
32.如何优化 webpack 打包速度
⚫ 并行编译：
◼
thread-loader：
利用多个 CPU 内核并行运行加载器。
◼
HappyPack ：
将模块转换任务分解到多个 worker 进程中并行处理。
⚫ 代码拆分：
◼
splitChunksPlugin
代码分割，将公共代码、第三方库等抽离到单独的 chunk，减
少重复编译的工作量。
⚫ 动态导入（import()）：
◼
根据路由或其他条件按需加载代码，避免一次性打包所有代码。
⚫ Tree Shaking：
◼
确保你的 ES 模块使用的是静态导入导出， Tree Shaking 移除未使用的代码。
⚫ DllPlugin/DllReferencePlugin：
◼
不经常变动的依赖（如 React, Vue 库）提前打包成
DLL（动态链接库）
，避免每次
构建都重新打包这些库。
⚫ 减少 Loader 和 Plugin 的数量：
◼
只使用必要的 loader 和 plugin，每个额外的处理都会增加构建时间。
⚫ 提升 Loader 性能：
◼
Babel 等慢速 loader，使用针对性的配置优化，比如@babel/preset-env 的
useBuiltIns 和 targets 选项，减少不必要的 polyfill。
⚫ Excluding node_modules：
◼
不需要转译的 node_modules 模块，可以在.babelrc 或 webpack 配置中排除它们。
⚫ Cache：
◼
利用 Webpack 的持久化缓存特性，如 cacheDirectory 选项，或使用 hard-source
webpack-plugin 等第三方插件来缓存编译结果。
⚫ 优化 Resolving 配置：
◼
减少模块解析的搜索范围，通过 resolve.modules, resolve.alias 等配置项提高模块
查找速度。
⚫ Source Map 优化：
◼
开发环境使用 cheap-module-eval-source-map 或更快的 source-map 选项，生产
环境考虑是否需要 source map 或使用更简洁的格式。
⚫ 升级 Webpack 和其他依赖：
◼
保持 Webpack 及其相关 loader、plugin 的版本是最新的，新版本往往带来性能改
进。
⚫ 分析和监控：
◼
使用 webpack-bundle-analyzer 分析包大小，找出可以进一步优化的地方。
33.说说 webpack 中常见的 Loader？解决了什么问题？
⚫
loader 对模块的"源代码"进行转换，
⚫
在 import 或"加载"模块时预处理文件
⚫
webpack 分析各种模块依赖关系，然后形成资源列表，最终打包生成到指定的文件中。
⚫
babel-loader
:用 babel 来转换 ES6 文件到 ES5
⚫
html-minify-loader:
压缩 HTML
⚫
style-loader:
将 css 添加到 DOM 的内联样式标签 style 里
⚫
css-loader :
允许将 css 文件通过 require 的方式引入，并返回 css 代码
⚫
less-loader:
处理 less
→
css
⚫
sass-loader:
处理 sass
→
css
⚫
postcss-loader:
用 postcss 来处理 CSS
⚫
autoprefixer-loader:
处理 CSS3 属性前缀，已被弃用，建议直接使用 postcss
⚫
file-loader:
分发文件到 output 目录并返回相对路径
⚫
url-loader:
和 file-loader 类似，但是当文件小于设定的 limit 时可以返回一个 Data Url
34.说说 webpack 中常见的 Plugin？解决了什么问题？
⚫
Plugin（Plug-in）是一种计算机应用程序，它和主应用程序互相交互，以提供特定的功
能
⚫
是一种遵循一定规范的应用程序接口编写出来的程序，只能运行在程序规定的系统下，
因为其需要调用原纯净系统提供的函数库或者数据
⚫
webpack 中的 plugin 也是如此，plugin 赋予其各种灵活的功能，例如打包优化、资源
管理、环境变量注入等，它们会运行在 webpack 的不同阶段（钩子 / 生命周期），贯穿
了 webpack 整个编译周期
⚫
HtmlWebpackPlugin
◼ 在打包结束后，自动生成一个 html 文文件，
◼ 并把打包生成的 js 模块引入到该 html 中
⚫
clean-webpack-plugin
删除（清理）构建目录
⚫
mini-css-extract-plugin
提取 CSS 到一个单独的文件中
⚫
DefinePlugin
允许在编译时创建配置的全局对象，是一个 webpack 内置的插件，不需
要安装
⚫
copy-webpack-plugin
◼ 复制文件或目录到执行区域，
◼ 如 vue 的打包过程中，如果我们将一些文件放到 public 的目录下，那么这个目录
会被复制到 dist 文件夹中
35.请详细说说 webpack 中的 plugin 和 loader 之间的区别是什么？
⚫ loader
◼
是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩
等，最终一起打包到指定的文件中
⚫ plugin
赋予了 webpack 各种灵活的功能，例如打包优化、资源管理、环境变量注入等，目的是解决 loader 无法实现的其他事
36.说说你对 promise 的了解
Promise 承诺
，异步编程的一种解决方案，比传统解决方案（回调函数）更合理和更加强大
回调函数
形成了经典的回调地狱
promise 解决异步操作的优点：
⚫
链式操作减低了编码难度
⚫
代码可读性明显增强
⚫
状态
promise 对象仅有三种状态
⚫
pending（进行中）
⚫
fulfilled（已成功）
⚫
rejected（已失败）
对象的状态不受外界影响，只有异步操作的结果，可以决定当前状态
用法
⚫
Promise 对象是一个构造函数，用来生成 Promise 实例
const promise = new Promise(function(resolve, reject) {});
⚫
Promise 构造函数接受一个函数作为参数，函数的两个参数分别是 resolve 和 reject
⚫
resolve 函数：
将 Promise 对象的状态从“未完成”变为“成功”
⚫
reject 函数：
将 Promise 对象的状态从“未完成”变为“失败”
⚫ 实例方法 then() catch() finally()
⚫ then()
◼
实例状态发生改变时的回调函数
◆
第一个参数是 resolved 状态的回调函数，
◆
第二个参数是 rejected 状态的回调函数
◼
then 方法返回的是一个新的 Promise 实例，也就是 promise 能链式书写的原因
⚫ catch()
.then(null, rejection)或.then(undefined, rejection)
的别名，
◼
用于指定发生错误时的回调函数
◼
Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止
◼
一般来说，使用 catch 方法代替 then()第二个参数
⚫ finally()
◼
用于指定不管 Promise 对象最后状态如何，都会执行的操作
构造函数方法 all() race() allSettled() resolve() reject()
⚫ all()
◼
Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例
const p = Promise.all([p1, p2, p3]);
◼
接受一个数组作为参数，数组成员都为 Promise 实例
◼
实例 p 的状态由 p1、p2、p3 决定，分为两种：
◆
只有 p1、p2、p3 的状态都变成 fulfilled，p 的状态才会变成 fulfilled，此时 p1、
p2、p3 的返回值组成一个数组，传递给 p 的回调函数
◆
只要 p1、p2、p3 之中有一个被 rejected，p 的状态就变成 rejected，此时第
一个被 reject 的实例的返回值，会传递给 p 的回调函数
◼
注意，如果作为参数的 Promise 实例，自己定义了 catch 方法，那么它一旦被
rejected，并不会触发 Promise.all()的 catch 方法
⚫ race()
◼
Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例
const p = Promise.race([p1, p2, p3]);
◼
只要 p1、p2、p3 之中有一个实例率先改变状态，p 的状态就跟着改变
◼
率先改变的 Promise 实例的返回值则传递给 p 的回调函数
⚫ allSettled()
◼
Promise.allSettled()方法接受一组 Promise 实例作参数，包装一个新 Promise 实例
◼
只有等到所有这些参数实例都返回结果，不管是 fulfilled 还是 rejected，包装实例
才会结束
const promises = [
fetch('/api-1'),
fetch('/api-2'),
fetch('/api-3'),
];
await Promise.allSettled(promises);
removeLoadingIndicator();
⚫ resolve()
◼
将现有对象转为 Promise 对象
Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))
◼
参数可以分成四种情况：
◆
参数是一个 Promise 实例，promise.resolve 将不做任何修改、原封不动地返
回这个实例
◆
参数是一个thenable对象，promise.resolve会将这个对象转为 Promise对象，
然后就立即执行 thenable 对象的 then()方法
◆
参数不是具有 then()方法的对象，或根本就不是对象，Promise.resolve()会返
回一个新的 Promise 对象，状态为 resolved
◆
没有参数时，直接返回一个 resolved 状态的 Promise 对象
⚫ reject()
◼
Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为
rejected
const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))
使用场景
⚫
将图片的加载写成一个 Promise，一旦加载完成，Promise 的状态就发生变化
⚫
通过链式操作，将多个渲染数据分别给个 then，让其各司其职。或当下个异步请求依
赖上个请求结果的时候，我们也能够通过链式操作友好解决问题
⚫
通过 all()实现多个请求合并在一起，汇总所有请求结果，只需设置一个 loading 即可
⚫
通过 race 可以设置图片请求超时
