中高级前端大厂面试秘籍，直通大厂(下)(2)，2024年最新前端开发工程师面试常见问题

---

1. 原理简述

Webpack 已经成为了现在前端工程化中最重要的一环，通过Webpack与Node的配合，前端领域完成了不可思议的进步。通过预编译，将软件编程中先进的思想和理念能够真正运用于生产，让前端开发领域告别原始的蛮荒阶段。深入理解Webpack，可以让你在编程思维及技术领域上产生质的成长，极大拓展技术边界。这也是在面试中必不可少的一个内容。

• 核心概念

• JavaScript 的 模块打包工具 (module bundler)。通过分析模块之间的依赖，最终将所有模块打包成一份或者多份代码包 (bundler)，供 HTML 直接引用。实质上，Webpack 仅仅提供了 打包功能 和一套 文件处理机制，然后通过生态中的各种 Loader 和 Plugin 对代码进行预编译和打包。因此 Webpack 具有高度的可拓展性，能更好的发挥社区生态的力量。

• Entry: 入口文件，Webpack 会从该文件开始进行分析与编译；

• Output: 出口路径，打包后创建 bundler 的文件路径以及文件名；

• Module: 模块，在 Webpack 中任何文件都可以作为一个模块，会根据配置的不同的 Loader 进行加载和打包；

• Chunk: 代码块，可以根据配置，将所有模块代码合并成一个或多个代码块，以便按需加载，提高性能；

• Loader: 模块加载器，进行各种文件类型的加载与转换；

• Plugin: 拓展插件，可以通过 Webpack 相应的事件钩子，介入到打包过程中的任意环节，从而对代码按需修改；

• 工作流程 (加载 - 编译 - 输出)

• 1、读取配置文件，按命令 初始化 配置参数，创建 Compiler 对象；

• 2、调用插件的 apply 方法 挂载插件 监听，然后从入口文件开始执行编译；

• 3、按文件类型，调用相应的 Loader 对模块进行 编译，并在合适的时机点触发对应的事件，调用 Plugin 执行，最后再根据模块 依赖查找 到所依赖的模块，递归执行第三步；

• 4、将编译后的所有代码包装成一个个代码块 (Chuck)， 并按依赖和配置确定 输出内容。这个步骤，仍然可以通过 Plugin 进行文件的修改;

• 5、最后，根据 Output 把文件内容一一写入到指定的文件夹中，完成整个过程；

• 模块包装:

(function(modules) {

// 模拟 require 函数，从内存中加载模块；

function webpack_require(moduleId) {

// 缓存模块

if (installedModules[moduleId]) {

return installedModules[moduleId].exports;

}

var module = installedModules[moduleId] = {

i: moduleId,

l: false,

exports: {}

};

// 执行代码；

modules[moduleId].call(module.exports, module, module.exports, webpack_require);

// Flag: 标记是否加载完成；

module.l = true;

return module.exports;

}

// …

// 开始执行加载入口文件；

return webpack_require(webpack_require.s = “./src/index.js”);

})({

“./src/index.js”: function (module, webpack_exports, webpack_require) {

// 使用 eval 执行编译后的代码；

// 继续递归引用模块内部依赖；

// 实际情况并不是使用模板字符串，这里是为了代码的可读性；

eval(__webpack_require__.r(__webpack_exports__); // var _test__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("test", ./src/test.js"););

},

“./src/test.js”: function (module, webpack_exports, webpack_require) {

// …

},

})

复制代码

• 总结:

• 模块机制: webpack 自己实现了一套模拟模块的机制，将其包裹于业务代码的外部，从而提供了一套模块机制；

• 文件编译: webpack 规定了一套编译规则，通过 Loader 和 Plugin，以管道的形式对文件字符串进行处理；

2. Loader

由于 Webpack 是基于 Node，因此 Webpack 其实是只能识别 js 模块，比如 css / html / 图片等类型的文件并无法加载，因此就需要一个对 不同格式文件转换器。其实 Loader 做的事，也并不难理解: 对 Webpack 传入的字符串进行按需修改。例如一个最简单的 Loader:

// html-loader/index.js

module.exports = function(htmlSource) {

// 返回处理后的代码字符串

// 删除 html 文件中的所有注释

return htmlSource.replace(/ /g, ‘’)

}

复制代码

当然，实际的 Loader 不会这么简单，通常是需要将代码进行分析，构建 AST (抽象语法树)， 遍历进行定向的修改后，再重新生成新的代码字符串。如我们常用的 Babel-loader 会执行以下步骤:

• babylon 将 ES6/ES7 代码解析成 AST

• babel-traverse 对 AST 进行遍历转译，得到新的 AST

• 新 AST 通过 babel-generator 转换成 ES5

Loader 特性:

• 链式传递，按照配置时相反的顺序链式执行；

• 基于 Node 环境，拥有 较高权限，比如文件的增删查改；

• 可同步也可异步；

常用 Loader:

• file-loader: 加载文件资源，如 字体 / 图片 等，具有移动/复制/命名等功能；

• url-loader: 通常用于加载图片，可以将小图片直接转换为 Date Url，减少请求；

• babel-loader: 加载 js / jsx 文件， 将 ES6 / ES7 代码转换成 ES5，抹平兼容性问题；

• ts-loader: 加载 ts / tsx 文件，编译 TypeScript；

• style-loader: 将 css 代码以<style>标签的形式插入到 html 中；

• css-loader: 分析@import和url()，引用 css 文件与对应的资源；

• postcss-loader: 用于 css 的兼容性处理，具有众多功能，例如 添加前缀，单位转换 等；

• less-loader / sass-loader: css预处理器，在 css 中新增了许多语法，提高了开发效率；