又是一年金九银十，虽然市场一般，如何才能抓住来之不易的机会呢？自然是砥砺自身能力，完善知识体系。
挖下深坑擒虎豹，挂上长线钓金鳌。
本文基于笔者的个人面试经历 + 线上他人面经，筛选整理 webpack 常见面试题，并主观标记重点，各位酌情参考；
评论区有抽奖🥇哦
一、为什么要工程化
因为在浏览器端，开发时态、运行时态的侧重点不一样：
开发时态： devtime
- 模块划分越细越好
- 支持多种模块化标准
- 不考虑兼容性，怎么方便怎么写
- 支持 npm 或其他包管理器下载的模块
运行时态： runtime
- 文件越少越好
- 文件体积越小越好
- 代码内容越乱越好（安全性）
- 所有浏览器都要兼容
- 能够解决其他运行时的问题，主要是执行效率问题
这种差异在小项目中表现的并不明显，可是一旦项目形成规模，就越来越明显，如果不解决这些问题，前端项目形成规模只能是空谈。
解决方法
既然两种时态面临的侧重点不同，那么我们需要一个工具，能够将开发时态写的代码转换为运行时态的代码。
此时开发者只用专注开发左边的代码结构就好，一切问题，都由构建工具抹平。
常见的构建工具：webpack、vite、grunt、gulp、browserify …
二、webpack 基础
webpack 是基于模块化的打包(构建)工具，它把一切视为模块。
它通过一个开发时态的入口模块为起点，分析出所有的依赖关系，然后经过一系列的过程(压缩、合并)，最终生成运行时态的文件。
01｜特性
- 为前端工程化而生：webpack 致力于解决前端工程化，特别是浏览器端工程化中遇到的问题，让开发者集中注意力编写业务代码，而把工程化过程中的问题全部交给 webpack 来处理
- 简单易用：支持零配置，可以不用写任何一行额外的代码就使用 webpack
- 强大的生态：非常灵活、可以扩展，webpack 本身的功能并不多，但它提供了一些可以扩展其功能的机制，使得一些第三方库可以融于到 webpack 中
- 基于nodejs： 由于 webpack 在构建的过程中需要读取文件，因此它是运行在 node 环境中的
- 基于模块化：webpack 在构建过程中要分析依赖关系，方式是通过模块化导入语句进行分析的，它支持各种模块化标准，包括但不限于 CommonJS、ES6 Module
02｜安装与使用
步骤 1：初始化项目
创建项目目录：
mkdir my-webpack-project
cd my-webpack-project
初始化项目： npm init -y
步骤 2：安装 Webpack 和 Webpack CLI
npm install --save-dev webpack webpack-cli
步骤 3：创建 Webpack 配置文件
在项目根目录下创建一个名为 webpack.config.js 的文件，并添加以下基本配置：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'development'
};
步骤 4：创建项目结构
创建必要的目录和文件：
mkdir src
touch src/index.js
在 src/index.js 文件中添加一些示例代码：
console.log('Hello, Webpack!');
步骤 5：更新 package.json 脚本
在 package.json 文件中添加一个脚本来运行 Webpack：
{
"name": "my-webpack-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"devDependencies": {
"webpack": "^5.0.0",
"webpack-cli": "^4.0.0"
}
}
步骤 6：运行 Webpack
使用以下命令运行 Webpack 构建项目：npm run build
运行成功后，你将在项目根目录下看到一个 dist 目录，里面包含了 bundle.js 文件。
三、市面常见面试题
00｜减少代码体积方案
减少代码体积是优化前端性能的重要步骤，主要通过以下几种方法来实现：
1、代码压缩
通过删除代码中的空格、注释、换行符以及缩短变量名等方式来减少代码体积。
2、样式和脚本的合并
将多个 CSS 文件和 JavaScript 文件合并成一个文件，以减少 HTTP 请求的数量，从而提高加载速度。
3、移除未使用的代码（Tree Shaking）
Tree Shaking 是一种通过静态分析模块依赖关系，移除未使用代码的技术。常用的工具包括：
- Webpack：支持 Tree Shaking 的打包工具。
- Rollup：专注于 ES6 模块的打包工具，支持 Tree Shaking。
4、延迟加载
指在需要时才加载某些资源，以减少初始加载的代码体积，常用的方法包括：
- 动态导入：在需要时才加载模块。
- 按需加载：将代码分割成多个小块，按需加载。
5、图片和资源优化
虽然这不直接减少 JavaScript 或 CSS 代码的体积，但优化图片和其他资源可以显著减少整体页面的加载时间。常用的方法包括：
- 图片压缩：使用工具如
ImageOptim、TinyPNG等。 - 使用矢量图：如
SVG格式的图像。 - 使用
WebP格式：比传统的JPEG和PNG更小。
01｜为什么要用 Webpack
没用 webpack 之前有什么问题：
- 全局变量污染： 传统的 JavaScript 开发中，所有变量和函数默认都是全局的；
- 手动管理依赖顺序麻烦： 在
里引入外部 JS 难度随着项目体量越来越难； - 手动进行性能优化繁琐： 如文件合并、压缩、减少 HTTP 请求，繁琐且易出错；
- 要确保代码在不同浏览器中的兼容性： 需要手动编写或引入 polyfills、babel 等第三方工具；
对于小型项目来说，这些问题不太明显。但随之项目规模逐渐增大，再去解决这些问题就很吃力，这个时候我们就需要一种工具来帮我们把这些机械性问题，自动化的解决掉，让开发者更加专注在业务层面。
02｜webpack 有哪些常见配置
有两种方式可以来控制 webpack 的行为。
- 配置文件（默认） ： webpack 会读取
webpack.config.js； - 命令行：或者通过 cli 参数
--config来指定其他配置文件；
配置文件通过 CommonJS 导出一个对象module.exports = {}，对象中的各种属性对应不同的 webpack 配置。当命令行参数与配置文件出现冲突时，以命令行参数为准。常见配置见下文代码：
- 入口(entry)： 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
- 输出(output)： 告诉 webpack 在哪输出它所创建的 bundles，以及如何命名这些文件。
- 转换器(module)： 声明 loader 用法。将某个源码字符串转换成另一个源码字符串返
- test：正则表达式，用于标识 Loader 转换哪类文件。
- use：字符串，标识使用哪些 Loader。调用规则从后向前，如下文处理 css 的 loader 会先使用
css-loader处理，得到的结果再传给style-loader。
- 插件(plugins)： 扩展了 webpack 的功能，并提供其编译过程中的一些事件钩子，plugin 去监听这些内容然后进行操作。
- ...
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
mode: 'development',
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /.(png|svg|jpg|gif)$/,
use: ['file-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
new WebpackManifestPlugin({
fileName: 'manifest.json',
publicPath: '/',
}),
],
devServer: {
contentBase: './dist',
hot: true,
proxy: {
'/api': 'http://localhost:3000',
},
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
alias: {
'@components': path.resolve(__dirname, 'src/components/'),
'@utils': path.resolve(__dirname, 'src/utils/'),
},
},
optimization: {
splitChunks: {
chunks: 'all',
},
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
},
},
}),
],
},
devtool: 'source-map',
};
03｜webpack 的构建/打包流程是什么（高频）
-
初始化参数：从配置文件 和 Shell 语句中读取与合并参数，得出最终的参数；
-
开始编译：用上一步得到的参数
- 初始化 Compiler 对象
- 加载所有配置的 Plugin 插件
- 执行对象的
run方法开始执行编译；
-
确定入口：根据配置项的
entry，找出所有的入口文件； -
编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，递归此步骤直到所有依赖的文件也都处理过；
-
输出资源：根据入口和模块之间的依赖关系，组装成一个包含多个模块的 Chunk。再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
-
输出完成：在确定好输出内容后，根据
output确定输出的路径和文件名，输出文件夹。
在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。
总的来说，Webpack 的模块打包原理就是通过递归解析模块之间的依赖关系，将所有的模块打包成为一个或多个文件，并通过一系列的插件和 loader 对代码进行处理和优化。
这样可以减少 HTTP 请求次数、提高页面加载速度，并大大提高了前端开发的效率和可维护性。
04｜webpack 如何确定依赖引用顺序
依赖图的构建过程
- 入口点：Webpack 从配置的入口点
entry开始，从入口文件开始解析。 - 递归解析：递归解析每个模块的依赖，找到所有被引用的模块。
- 构建依赖图：根据模块之间的依赖关系构建一个依赖图。
- 确定顺序：根据依赖图确定模块的引用顺序，确保被依赖的模块先于依赖它们的模块打包。
05｜Module/Chunk/Bundle 是什么
- Module：webpack 里一个概念性内容，每个文件都可以看为一个 module。 js、css、图片等都可以看作 module。
- Chunk：代码块，webpack 处理代码时候的一个中间态，它表示有一组功能相关的模块的集合。一个 Chunk 可以由多个模块（module）组成
- Bundle：是 Webpack 构建结果的输出，由一个或多个 Chunk 的合并优化后的结果，最终以文件形式输出，用于在浏览器中加载和执行。
06｜Loader 和 Plugin有什么区别（高频）
Loader 转换器，用于转换模块的源代码。可以将不同类型的文件（如 CSS、图像、TypeScript 等）转换为 JavaScript 模块，从而使它们能够被 Webpack 处理。以下是 CSS 转换的例子：
module.exports = {
css: "body { background-color: lightblue; } h1 { color: navy; }"
};
const style = document.createElement('style');
style.textContent = module.exports.css;
document.head.appendChild(style);
Plugin 插件是 Webpack 的扩展，执行范围更广，可以在构建过程的各个阶段进行操作和自定义功能。Webpack 会提供一些 API 和 生命周期钩子方便开发者触达到除了编译之外的一些环节来执行操作。
使用场景
- 压缩输出的 JavaScript 文件（如使用 TerserPlugin）。
- 提取 CSS 到单独的文件（如使用 MiniCssExtractPlugin）。
- 生成 HTML 文件并自动注入打包后的资源（如使用 HtmlWebpackPlugin）。
- 清理输出目录（如使用 CleanWebpackPlugin）。
07｜写 Loader 的步骤和思路
Loader 本质上是一个函数，作用是将某个源码字符串转换成另一个源码字符串返回。接收源文件代码字符串为参数，经过处理转换，然后 return 目标代码字符串，构建步骤如下：
module.exports = function(source) {
const result = source.replace(/b(foo)b/g, 'bar');
return result;
};
- 新建一个 JS 文件
- 写 Loader 函数：
- 接收
source参数 - 内容转换
- 结果返回
- 接收
- 导出这个函数
- 在
webpack.config.js文件中配置使用 - 如果想发布 NPM 就走发布流程，然后写份清晰的文档
注意：如果 Loader 有异步操作需要通过 this.async() 处理，不然可能会出现 Loader 函数在异步操作完成前返回，导致转换结果不正确。
this.async()方法返回一个回调函数，你将通过这个回调函数来返回处理结果或错误。回调接收三个参数
- 错误：Loader 执行过程中出错，则返回给这个参数。没错就传
null/undefined - 结果：Loader 执行成功后的结果
- SourceMap（可选）：如果转换过程中能产生 SourceMap 可以通过这个传参帮助定位错误位置
module.exports = function(source) {
const callback = this.async();
someAsyncOperation(source, (err, transformedSource, sourceMap) => {
if (err) {
callback(err);
return;
}
callback(null, transformedSource, sourceMap);
});
};
08｜写 Plugin 的步骤和思路
在 Webpack 中，Plugin 是一个具有 apply 方法的对象。
apply 方法会被 Compiler 对象调用，并且在整个编译生命周期可以访问 Compiler 对象。所以步骤如下：
- 编写插件类：创建一个类，实现
apply方法。Webpack 在启动编译过程时，会调用每个插件实例的apply方法 - 注册钩子回调：在
apply方法中，使用编译器 Compiler 对象注册你需要的钩子回调。 - 实现功能逻辑：在回调函数中实现具体的插件逻辑。
module.exports = class MyPlugin {
apply(compiler) {
compiler.hooks.done.tap('MyPlugin', (Compilation) => {
console.log('MyPlugin: Compilation finished!');
});
}
}
在这个例子中，MyPlugin 类定义了一个 apply 方法，这个方法接收一个 compiler 参数。
我们在 compiler.hooks.done 上注册了一个回调，这个回调会在编译完成后执行，输出一条消息。
要将插件应用到 webpack，需要把插件对象配置到 webpack 的 plugins 数组中，如下：
const MyPlugin = require('./MyPlugin');
module.exports = {
plugins: [
new MyPlugin(),
]
}
09｜用过哪些常见 Loader
在Webpack中，loader用于将各种类型的文件转换为模块。以下是一些常见的loader及其用途：
babel-loader
- 用途：将 ES6 及以上版本的 JavaScript 代码转换为向后兼容的 JavaScript 代码。
css-loader/style-loader这俩一般一起用
- css-loader 解析 CSS 文件中的
@import和url()，将 CSS 转为 Webpack 可管理的模块。 - style-loader 将处理后的 CSS 注入页面，通过在
中添加