2026年webpack面试题目及答案

2026年webpack面试题目及答案考试时长：120分钟满分：100分一、单选题（总共10题，每题2分，总分20分）1.在Webpack中，以下哪个插件用于压缩JavaScript代码？A.CleanWebpackPluginB.TerserWebpackPluginC.MiniCssExtractPluginD.CopyWebpackPlugin2.Webpack的构建过程中，以下哪个阶段发生在“优化”阶段之前？A.模块解析B.依赖收集C.代码生成D.优化3.在Webpack配置中，`mode:'production'`与`mode:'development'`的主要区别是什么？A.优化级别不同B.模块缓存策略不同C.代码压缩方式不同D.以上都是4.Webpack中，如何定义一个外部依赖，使其不被打包进主输出文件？A.使用`externals`配置项B.使用`exclude`配置项C.使用`include`配置项D.使用`optimization.splitChunks`5.在Webpack中，以下哪个加载器用于处理CSS文件？A.babel-loaderB.css-loaderC.vue-loaderD.file-loader6.Webpack的“魔法注释”通常用于什么场景？A.定义模块名称B.优化代码分割C.插件开发D.以上都是7.在Webpack中，如何为某个模块添加自定义的加载器执行顺序？A.使用`enforce`选项B.使用`loader`数组顺序C.使用`optimization.moduleIds`D.使用`resolve.extensions`8.Webpack的`devServer`配置中，`hot`选项的作用是什么？A.启用模块热替换B.启用HTTP服务C.启用代码压缩D.启用缓存9.在Webpack中，如何定义一个多入口的构建配置？A.使用`entry`数组B.使用`output.filename`C.使用`optimization.runtimeChunk`D.使用`resolve.alias`10.Webpack的`optimization.minimizer`配置项用于什么？A.定义代码压缩插件B.定义模块分割策略C.定义缓存策略D.定义热替换配置二、填空题（总共10题，每题2分，总分20分）1.Webpack的核心概念是______和______。2.在Webpack配置中，`entry`定义了______的入口起点。3.`loader`和`plugin`的主要区别在于______。4.Webpack的`resolve.alias`用于______。5.`optimization.splitChunks`的作用是______。6.Webpack的`devServer.contentBase`用于指定______。7.`externals`配置项用于定义______。8.`file-loader`将文件转换为______并输出。9.Webpack的魔法注释以______开头。10.`optimization.runtimeChunk`用于优化______的生成。三、判断题（总共10题，每题2分，总分20分）1.Webpack只能用于构建JavaScript项目。（×）2.`mode:'development'`模式下，Webpack会启用代码压缩。（×）3.`loader`可以处理多种类型的文件。（√）4.`plugin`在Webpack的整个构建过程中都会执行。（√）5.`optimization.minimizer`可以自定义多个压缩插件。（√）6.`devServer`配置中的`open`选项用于自动打开浏览器。（√）7.`externals`可以用于排除某些模块不被Webpack打包。（√）8.`file-loader`和`asset/resource`的作用完全相同。（√）9.Webpack的魔法注释只能用于CSS文件。（×）10.`optimization.splitChunks`会提高首次加载速度。（√）四、简答题（总共4题，每题4分，总分16分）1.简述Webpack的构建流程及其主要阶段。2.解释Webpack中`loader`和`plugin`的区别。3.描述`optimization.minimizer`的作用及其配置方式。4.如何使用Webpack实现代码分割？五、应用题（总共4题，每题6分，总分24分）1.请编写一个基础的Webpack配置文件，实现以下功能：-入口文件为`src/index.js`。-输出文件为`dist/bundle.js`。-使用`babel-loader`处理ES6语法。-使用`css-loader`和`style-loader`处理CSS文件。2.在Webpack配置中，如何实现以下需求：-将所有CSS文件单独打包成`style.css`。-使用`MiniCssExtractPlugin`提取CSS。-优化第三方库的代码分割。3.请解释如何在Webpack中配置`devServer`，实现以下功能：-启动本地服务器，端口为8080。-启用模块热替换。-自动打开浏览器访问`http://localhost:8080`。4.在Webpack中，如何定义一个外部依赖（如`lodash`），使其不被打包进主输出文件，而是通过`<script>`标签引入？【标准答案及解析】一、单选题1.B解析：`TerserWebpackPlugin`用于JavaScript代码压缩，其他选项的功能分别为：`CleanWebpackPlugin`清理构建目录、`MiniCssExtractPlugin`提取CSS、`CopyWebpackPlugin`复制文件。2.A解析：Webpack构建阶段顺序为：模块解析、依赖收集、优化、代码生成，因此“优化”阶段在“代码生成”之前。3.D解析：`mode`影响优化级别、模块缓存、代码压缩方式等，因此所有选项均正确。4.A解析：`externals`用于定义外部依赖，使其不被Webpack打包。5.B解析：`css-loader`用于处理CSS文件，其他选项的功能分别为：`babel-loader`转译JS、`vue-loader`处理Vue文件、`file-loader`处理文件资源。6.D解析：魔法注释用于定义模块名称、代码分割等，因此所有场景均适用。7.B解析：`loader`数组顺序决定执行顺序，`enforce`用于优先或后置加载器。8.A解析：`hot`选项启用模块热替换，其他选项的功能分别为：HTTP服务、代码压缩、缓存。9.A解析：`entry`数组定义多入口，其他选项的功能分别为：输出文件名、代码分割、缓存策略、路径别名。10.A解析：`minimizer`用于定义代码压缩插件，其他选项的功能分别为：模块分割、缓存策略、热替换配置。二、填空题1.模块系统、构建流程解析：Webpack基于模块系统，通过构建流程处理依赖。2.模块解析：`entry`定义模块的入口起点。3.执行时机和功能解析：`loader`处理文件转换，`plugin`操作构建流程。4.定义路径别名解析：`resolve.alias`用于简化模块引用路径。5.代码分割解析：`splitChunks`将公共模块分割成独立文件。6.静态文件服务目录解析：`contentBase`指定服务静态文件目录。7.外部依赖解析：`externals`定义不打包的依赖。8.URL解析：`file-loader`输出文件为URL格式。9.`/`解析：魔法注释以`/`开头，如`/webpackChunkName:"vendor"/`。10.runtime文件解析：`runtimeChunk`优化runtime文件生成。三、判断题1.×解析：Webpack支持多种语言和资源文件。2.×解析：`development`模式下不压缩代码，仅优化性能。3.√解析：`loader`支持多种文件类型处理。4.√解析：`plugin`在构建全流程执行。5.√解析：可配置多个压缩插件。6.√解析：`open`选项自动打开浏览器。7.√解析：`externals`排除模块不打包。8.√解析：两者均处理文件资源。9.×解析：魔法注释可用于多种文件。10.√解析：分割代码可优化首次加载。四、简答题1.解析：Webpack构建流程分为四个阶段：-模块解析：分析入口文件，递归解析依赖。-依赖收集：构建模块依赖图。-优化：执行插件和loader优化代码。-代码生成：生成最终输出文件。2.区别：-`loader`：逐个处理文件转换（如`babel-loader`转译JS）。-`plugin`：操作构建流程（如`CleanWebpackPlugin`清理目录）。3.作用：`minimizer`用于执行代码压缩，配置方式：```javascriptoptimization.minimizer.push(newTerserWebpackPlugin());```4.代码分割：-使用`optimization.splitChunks`：```javascriptoptimization.splitChunks({chunks:'all',});```-多入口配置`entry`，输出多个`bundle`。五、应用题1.配置文件：```javascriptconstpath=require('path');module.exports={entry:'./src/index.js',output:{filename:'dist/bundle.js',path:path.resolve(__dirname,'dist'),},module:{rules:[{test:/\.js$/,exclude:/node_modules/,use:'babel-loader',},{test:/\.css$/,use:['css-loader','style-loader'],},],},};```2.CSS提取配置：```javascriptconstMiniCssExtractPlugin=require('mini-css-extract-plugin');module.exports={optimization:{splitChunks:{chunks:'all',},},module:{rules:[{test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader'],},],},plugins:[newMiniCssExtractPlugin({filename:'dist/st