前端工程化口试题（一）

怎样利用 Docker 摆设前端项目？

利用 Docker 摆设前端项目通常涉及以下几个步调：

• 创建项目：起首，须要在本地创建并设置好前端项目。
  
• 准备 Docker 文件：
  
  
  
  • .dockerignore：这个文件用于打扫不须要上传到 Docker 服务端的文件或目次。
    
  • Dockerfile：这是 Docker 的焦点文件，用于构建 Docker 容器镜像。通常，Dockerfile 会包罗根本镜像、工作目次设置、依赖安装、项目构建等指令。
    
  • nginx.conf（可选）：如果项目须要服务器来托管，可以准备一个 nginx 设置文件来设置服务器。
    
  
  
• 构建 Docker 镜像：在项目标根目次下，利用 docker build 下令来构建 Docker 镜像。比方：docker build -t my-frontend-app .。这里的 -t 或 --tag 用于给构建的镜像添加一个或多个标签。
  
• 创建并运行 Docker 容器：利用 docker run 下令来创建并运行 Docker 容器。比方：docker run -itd -p 8080:80 --name my-frontend-container my-frontend-app。这里的 -i、-t、-d 分别体现交互模式、分配一个终端、在背景运行容器，-p 用于映射端口。
  
• 访问应用：在欣赏器中输入容器的映射地点（如 http://localhost:8080），即可访问摆设在 Docker 容器中的前端项目。
  

什么是 npm cache？怎样有效管理它？

npm cache 是 npm（Node Package Manager）的缓存机制，它用于生存已下载的包，以便在未来的安装中可以快速访问。这可以明显淘汰安装时间，特别是在慢速网络或离线环境中。
有效管理 npm cache 的方法包罗：

• 清算缓存：利用 npm cache clean 下令可以清算整个 npm 缓存。如果须要清算特定包的缓存，可以利用 npm cache clean <package-name> --force。
  
• 查察缓存：利用 npm cache ls 下令可以列出缓存中的全部包。也可以查察特定包的缓存信息。
  
• 修复缓存：如果碰到与缓存相干的题目，可以实行清算缓存来修复。
  
• 设置缓存：可以通过 .npmrc 文件设置缓存的存储路径和巨细限定等。
  

怎样通过 npm 发布前端 package？发布流程是怎样的？

通过 npm 发布前端 package 的流程通常包罗以下几个步调：

• 注册 npm 账号：在 npm 官网 注册一个账号。
  
• 准备 package：
  
  
  
  • 创建一个新的项目文件夹，并利用 npm init 下令初始化一个新的 npm 包。
    
  • 编写项目代码和 README.md 文件，详细形貌 package 的信息和利用方法。
    
  • 准备 package.json 文件，确保此中的 name、version、description、main、keywords、author 和 license 等字段都已精确填写。
    
  
  
• 登录 npm：在下令行中利用 npm login 下令登录 npm 账号。
  
• 发布 package：在项目根目次下，利用 npm publish 下令发布 package。如果发布乐成，你会看到下令行提示 package 已经乐成发布。
  

export、export default 和 module.exports 有什么区别？

• export：是 ES6 模块体系的焦点部门，用于从文件中导出函数、关键字、对象或值，使其可以在其他文件中通过 import 语句导入和利用。它支持定名导出和默认导出。
  
• export default：用于导出模块的默认值。每个模块只能有一个默认导出。导入时，可以利用恣意名称来吸收这个默认导出。
  
• module.exports：是 CommonJS 模块体系的一部门，在 Node.js 环境中利用。它用于导出模块，但这不是 ES6 尺度的一部门。与 export 差异，module.exports 只能导出一个对象或函数作为模块的接口。
  

在 window 对象中，模块间依赖关系由文件加载次序决定，这种模块构造方式有哪些缺点？

在 window 对象中，如果模块间的依赖关系由文件加载次序决定，那么这种模块构造方式大概会带来以下缺点：

• 依赖关系不明确：由于依赖关系潜伏在文件加载次序中，因此很难直观地看出模块之间的依赖关系。
  
• 难以维护：随着项目标增长，文件数量和依赖关系会变得越来越复杂，维护起来也会更加困难。
  
• 轻易堕落：如果文件加载次序发生厘革，大概某个模块被遗漏或重复加载，都大概导致项目堕落。
  

什么是前端工程化？它有什么意义？

前端工程化是指将前端开发纳入软件工程范畴，采取体系化、规范化的方法来举行前端项目标开发、测试、摆设和维护。它的意义在于：

• 进步开发服从：通过工程化的方法，可以自动化地构建、测试和摆设前端项目，从而大大进步开发服从。
  
• 包管代码质量：通过代码查察、单元测试、集成测试等本领，可以包管代码的质量和稳固性。
  
• 便于团队协作：工程化的方法使得前端项目更加模块化、组件化，便于团队成员之间的协作和分工。
  
• 低落维护资本：通过公道的项目结构和清楚的依赖关系，可以低落项目标维护资本。
  

什么是 ESLint？它有什么作用？

ESLint 是一个静态代码查抄工具，用于辨认和陈诉 JavaScript 代码中的模式。它的告急作用包罗：

• 代码质量查抄：通过设置规则集，ESLint 可以查抄代码中的匿伏题目，如未声明的变量、未利用的变量、语法错误等。
  
• 代码风格同一：ESLint 可以逼迫团队成员依照同等的代码风格，从而进步代码的可读性和可维护性。
  
• 自动化修复：对于一些简单的错误或不符合规则的地方，ESLint 可以提供自动化修复的发起或工具。
  

怎样在 Webpack 中切换开发环境和生产环境？

在 Webpack 中，可以通过设置差异的环境变量来切换开发环境和生产环境。通常，这涉及到以下几个步调：

• 界说环境变量：在 package.json 的 scripts 部门，可以为差异的环境界说差异的脚本下令。比方，可以利用 cross-env 工具来设置环境变量："build": "cross-env NODE_ENV=production webpack --config webpack.config.js" 和 "start": "cross-env NODE_ENV=development webpack serve --config webpack.config.js"。
  
• 读取环境变量：在 Webpack 设置文件中，可以利用 process.env.NODE_ENV 来读取当前的环境变量。
  
• 设置差异的插件和加载器：根据环境变量的值，可以设置差异的插件和加载器。比方，在生产环境中，可以启用代码压缩、优化等插件；在开发环境中，可以启用热更新、source map 等插件。
  

Webpack 的 Tree shaking 机制的原理是什么？

Webpack 的 Tree shaking 机制是一种优化技能，用于在构建过程中移除 JavaScript 中未利用的代码。它的原理告急基于 ES6 的模块体系（即 import/export）和静态分析。
在构建过程中，Webpack 会分析模块的依赖关系，并确定哪些代码是实际被利用的，哪些代码是未利用的。然后，它会移除那些未利用的代码，从而减小打包后的文件体积。
须要注意的是，Tree shaking 只能在 ES6 模块体系中有效工作，由于 CommonJS 模块体系是动态加载的，无法举行静态分析。
怎样利用 Webpack 实现异步加载？

在 Webpack 中，可以利用动态 import 语法来实现异步加载。动态 import 返回一个 Promise 对象，该对象在分析模块时完成。
比方，可以利用以下代码来异步加载一个模块：

1. import(/* webpackChunkName: "myModule" */ './myModule').then(module => {
2.   // 使用加载的模块
3.   module.default();
4. }).catch(error => {
5.   // 处理加载错误
6.   console.error('Error loading module:', error);
7. });

复制代码

这里的 /* webpackChunkName: "myModule" */ 是一个解释，用于指定天生的 chunk 的名称。Webpack 会将这个模块打包成一个单独的 chunk 文件，并在须要时异步加载它。
利用 html-webpack-plugin 时找不到指定的 template 文件怎么办？

在利用 html-webpack-plugin 时，如果找不到指定的 template 文件，可以实行以下几个办理方法：

• 查抄文件路径：确保 template 文件的路径是精确的。如果路径中包罗相对路径或特别字符，请确保它们被精确处理处罚。
  
• 查抄文件名和扩展名：确保文件名和扩展名与在 html-webpack-plugin 设置中指定的名称相匹配。
  
• 清算缓存：偶然间，Webpack 的缓存大概会导致题目。可以实行清算缓存后重新构建项目。
  
• 查抄 Webpack 设置：确保 html-webpack-plugin 的设置是精确的。特别是 template 选项，它应该指向一个有效的模板文件路径。
  

npm workspaces 办理了什么题目？

npm workspaces 是 npm 7 引入的一个功能，它办理了在大型项目中管理多个相干包时的依赖和版本辩论题目。通过利用 npm workspaces，可以在一个单一的堆栈中管理多个 npm 包，并共享类似的依赖关系。
详细来说，npm workspaces 允许你界说一个包罗多个子包的堆栈，并在根目次下利用一个 package.json 文件来管理全部子包的依赖关系。如许，当你安装依赖时，npm 会根据每个子包的须要来安装相应的依赖版本，并制止在差异子包之间引入辩论的依赖版本。
以下是针对您所提出题目标详细回复：
前端 http client 中怎样得知已吸收完全部相应数据?

在前端 HTTP client 中，通常通过以下几种方式得知已吸收完全部相应数据：

• 事故监听：利用如 XMLHttpRequest 或 Fetch API 时，可以监听相干的变瞎搅判定命据是否吸收完毕。比方，在利用 XMLHttpRequest 时，可以监听 onreadystatechange 事故，当 readyState 变为 4（体现哀求已完成且相应已停当）时，即可以为已吸收完全部相应数据。在利用 Fetch API 时，可以通过 response.json() 或 response.text() 等方法将相应体转换为 JSON 或文本，并在转换完成的 Promise 中处理处罚数据。
  
• 状态码查抄：在吸收到相应后，还须要查抄 HTTP 状态码以确保哀求乐成。通常，状态码在 200~299 范围内体现哀求乐成。
  

semver 规范中，~1.2.3 与^1.2.3 的版本号范围分别是什么?

在 SemVer（Semantic Versioning）规范中，~1.2.3 和 ^1.2.3 分别体现差异的版本号范围：

• ~1.2.3：体现允许补丁级别的更新，即允许升级到 1.2.x 中的任何版本，但不允许升级到 1.3.0 或更高版本。
  
• ^1.2.3：体现允许兼容的更新，即允许升级到 1.x.x 中的任何版本，但不允许升级到 2.0.0 或更高版本。不外，如果主版本号为 0（比方 0.2.3），则 ^0.2.3 允许升级到任何 0.x.x 版本，由于主版本号为 0 时通常体现软件处于开发阶段，大概会有不兼容的更改。
  

core-js 是什么?有什么作用?

Core-js 是一个广泛利用的 JavaScript 尺度库的 polyfill，它为旧版欣赏器或环境提供了新尺度的实现。其告急作用包罗：

• 提供新特性：为不支持新 JavaScript 特性的旧欣赏器或环境提供这些特性的实现。
  
• 进步兼容性：通过为旧环境提供新特性的 polyfill，使开发者可以大概利用最新的 JavaScript 特性而无需担心兼容性题目。
  

package-lock.json 与 yarn.lock 有什么区别?

package-lock.json 和 yarn.lock 都是用于记录项目依赖及其版本的文件，但它们分别由 npm 和 Yarn 包管理器天生，具有以下区别：

• 天生方式：package-lock.json 是 npm 在安装依赖时自动天生的，而 yarn.lock 是 Yarn 在安装依赖时天生的。
  
• 结构差异：两者在文件结构和内容上有所差异，但都是为了确保项目依赖的版本同等性。
  
• 兼容性：package-lock.json 仅与 npm 兼容，而 yarn.lock 仅与 Yarn 兼容。利用 npm 时应利用 package-lock.json，利用 Yarn 时应利用 yarn.lock。
  

Webpack 和 Vite 构建工具有什么区别?各自的优缺点是什么?

Webpack 和 Vite 都是前端构建工具，但它们具有差异的特点和优缺点：

• Webpack：
  
  
  
  • 优点：功能强大，插件丰富，支持复杂的项目结构和依赖关系。
    
  • 缺点：设置相对复杂，学习曲线较陡，热更新（HMR）性能大概不如 Vite。
    
  
  
• Vite：
  
  
  
  • 优点：开发体验快，支持即时热更新（HMR），设置简单且默认设置公道。
    
  • 缺点：相对于 Webpack，生态体系和插件数量大概较少，对复杂项目标支持大概不如 Webpack 美满。
    
  
  

什么是前端的 SWC 和 Esbuild?它们有什么作用?

• SWC：通常指的是一个用于编译和转换 JavaScript 和 TypeScript 代码的工具链，它大概是一个特定项目或工具的一部门，但在前端开发中并不是一个广泛认知的尺度工具。关于其详细作用和详细信息，大概须要根据详细项目或工具链举行相识。
  
• Esbuild：是一个极快的 JavaScript 打包器和压缩器，它利用 Go 语言编写，具有精彩的性能和构建速率。Esbuild 的告急作用包罗：
  
  
  
  • 快速打包：将多个 JavaScript 和 CSS 文件打包成一个或多个文件，以优化加载和性能。
    
  • 代码压缩：对打包后的代码举行压缩，以淘汰文件巨细并进步加载速率。
    
  • 支持当代 JavaScript 特性：支持最新的 JavaScript 特性，包罗模块、类和异步函数等。
    
  
  

Webpack 的焦点原理是什么?

Webpack 的焦点原理包罗以下几个方面：

• 入口：Webpack 从设置的入口文件开始构建依赖图，递归地分析和构建全部依赖的模块。
  
• 模块：Webpack 将全部范例的文件（如 JavaScript、CSS、图片等）视为模块，并通过相应的 loader 举行处理处罚。Loader 允许 Webpack 处理处罚那些本身不能直接被 JavaScript 表明实行的文件（如 CSS、图片等），并将它们转换为有效的模块。
  
• 依赖图：Webpack 构建一个依赖图，该图形貌了模块之间的依赖关系。每个模块都有一个唯一的标识符，而且模块之间的依赖关系通过标识符举行引用。
  
• 输出：Webpack 将构建后的模块打包成一个或多个文件，并根据设置将这些文件输出到指定的目次。
  

npm 实行下令时，为什么须要利用双横线通报参数?

npm 实行下令时，利用双横线（--）通报参数的缘故原由是为了明确区分 npm 下令本身的参数和通报给脚本或步调的参数。当 npm 脚本实行时，它会开启一个 shell 来实行指定的脚本下令或文件。双横线（--）用于告诉 npm，背面的参数不是 npm 下令本身的参数，而是应该通报给 shell 脚本或步调的参数。如许做可以制止参数肴杂息争析错误。比方，在 npm script 中有以下下令：{"start": "serve"}，此中 serve 可通过 --port 指定端标语。利用 npm start -- --port 8080 下令时，-- --port 8080 部门会被通报给 serve 步调，而不是被 npm 分析为其自身的参数。
针对您提出的题目，以下是详细的回复：
Performance API 中哪些指标可以衡量首屏加载时间?

在 Performance API 中，可以通太过析 performance.timing 属性中的多个指标来衡量首屏加载时间。这些指标包罗：

• navigationStart：体现前一页面卸载竣事的时间或欣赏器窗口的前一个网页关闭、unload 事故发生的时间戳。
  
• loadEventEnd：标志取页面加载完成的时间戳。
  

通过盘算 loadEventEnd 和 navigationStart 之间的差值，可以得到页面加载的总时间，这在某种程度上可以反映首屏加载时间。别的，redirectStart、redirectEnd、domainLookupStart、domainLookupEnd、responseStart、domLoading、domComplete 等指标也都在差异程度上影响首屏渲染时间。
怎样构造 CSS 以共同 Webpack 构建?

要构造 CSS 以共同 Webpack 构建，可以按照以下步调举行：

• 安装相干 loader：确保已经安装了 Webpack 和相干的 loader，如 css-loader 和 style-loader。
  
• 设置 Webpack：在 Webpack 设置文件中，添加对 CSS 文件的处理处罚规则。通常，这涉及到在 module.rules 数组中添加规则，指定当碰到以 .css 末了的文件时，利用 style-loader 和 css-loader 举行处理处罚。
  
• 利用 CSS 模块（可选）：为了制止全局污染和类名辩论，可以利用 CSS 模块。这须要在 css-loader 的设置中添加 modules: true 选项，并在 CSS 文件中利用 CSS 模块的语法。
  

Webpack 打包过程中，import 和 CommonJS 有什么区别?

在 Webpack 打包过程中，import 和 CommonJS（通常利用 require）有以下区别：

• 语法差异：import 是 ES6 引入的官方模块体系的一部门，支持静态导入和导出；而 CommonJS 是 Node.js 利用的模块体系，利用 require 函数导入模块，通过 module.exports 或 exports 导出。
  
• 打包举动：Webpack 对 import 和 require 的处理处罚有所差异。import 语句支持静态分析，有利于代码优化，如摇树优化（Tree Shaking）；而 CommonJS 模块在 Webpack 中通常会被原样输出，不举行静态分析。
  

当引入某个前端依赖项时，怎样确定引入的详细文件?

当引入某个前端依赖项时，可以通过以下步调确定引入的详细文件：

• 查察依赖项的文档：通常，依赖项的文档会提供有关怎样引入和利用该依赖项的详细信息。
  
• 查抄 package.json：package.json 文件中列出了项目标全部依赖项及其版本。通过查察该文件，可以相识引入了哪些依赖项。
  
• 分析导入路径：在代码中查找以 import 或 require 开头的语句，分析这些语句的导入路径，以确定引入了哪些详细文件。
  
• 查察 node_modules：如果以上方法无法确定详细文件，可以直接查察 node_modules 目次下的依赖项文件夹，以相识该依赖项包罗哪些文件和子目次。
  

什么是服务器端渲染 (SSR)?

服务器端渲染（Server-Side Rendering，简称 SSR）是指在服务器上完成网页的渲染工作，然后将完备的 HTML 页面发送给客户端。客户端的欣赏器吸收到 HTML 页面后，直接举行展示，无需举行复杂的逻辑盘算和渲染工作。SSR 的告急优点包罗进步加载速率、提升 SEO 排名、支持离线欣赏等。
前端项目中，怎样优化首屏渲染时间?

在前端项目中，优化首屏渲染时间可以采取以下步调：

• 淘汰网络哀求：通过归并和压缩文件、利用雪碧图或字体图标等技能，淘汰须要下载的资源数量和巨细。
  
• 延伸加载非关键资源：将非关键资源（如图片、视频）延伸加载，只在用户须要时再举行加载。
  
• 利用欣赏器缓存：设置得当的缓存战略，使得页面资源可以被欣赏器缓存起来，淘汰重复的网络哀求。
  
• 优化代码和文件巨细：精简和压缩 HTML、CSS 和 JavaScript 文件，删除不须要的代码、解释和空格。
  
• 异步加载和实行：将 JavaScript 脚本放在页面底部或利用异步加载的方式，确保脚本不会壅闭页面的渲染。
  
• 利用 CDN 加速：将静态资源摆设在内容分发网络（CDN）上，进步访问速率。
  
• 利用预渲染技能：通过预渲染技能提前天生首屏内容并存储为静态文件，当用户访问时直接返回。
  

Webpack 支持哪些脚本模块规范?

Webpack 支持多种脚本模块规范，包罗：

• ES Modules (ESM)：ECMAScript 2015（也称为 ES6）及厥后续版本引入的官方模块体系。
  
• CommonJS：告急用于 Node.js，也被广泛应用于欣赏器端代码的打包。
  
• Asynchronous Module Definition (AMD)：专为欣赏器端计划，支持异步加载模块。
  
• Universal Module Definition (UMD)：旨在提供一个在 AMD 和 CommonJS 环境下都可运行的模块界说。
  
• SystemJS 模块：由 SystemJS 提出的格式，用于动态加载模块。
  

怎样在前端项目中举行单元测试?

在前端项目中举行单元测试通常涉及以下步调：

• 选择测试框架：如 Jest、Mocha、Jasmine 等。
  
• 编写测试用例：针对要测试的功能或模块编写测试用例。
  
• 设置测试环境：设置测试运行器和测试框架的设置。
  
• 运行测试：利用下令行工具运行测试，并查察测试效果。
  
• 修复和优化：根据测试效果修复代码中的错误，并优化测试用例。
  

Webpack 的热更新底层是怎样实现的?它怎样在不革新欣赏器的条件下更新页面?

Webpack 的热更新（Hot Module Replacement，简称 HMR）底层实现依赖于 WebSocket 或其他及时通讯技能。当 Webpack 检测到文件厘革时，它会重新构建受影响的模块，并通过 WebSocket 将更新后的模块发送到客户端。客户端吸收到更新后的模块后，会利用这些模块更换掉旧的模块，从而实现页面内容的更新，而无需革新欣赏器。
Webpack 打包时 Hash 码是怎样天生的?怎样制止 Hash 码重复?

Webpack 打包时天生的 Hash 码通常是通过对文件内容举行哈希盘算得到的。Webpack 利用一个哈希算法（如 MD5、SHA-1 等）对文件内容举行盘算，天生一个唯一的 Hash 码。为了制止 Hash 码重复，可以采取以下步调：

• 确保文件内容唯一：在打包前确保每个文件的内容都是唯一的，制止类似内容的文件被重复打包。
  
• 利用内容哈希：Webpack 提供了内容哈希的选项（如 [contenthash]），该选项会根据文件内容天生 Hash 码，从而确保每个文件都有唯一的 Hash 码。
  
• 设置输出文件名：在 Webpack 设置中设置输出文件名时，可以利用占位符（如 [name].[contenthash].js）来天生包罗 Hash 码的文件名。
  

npm 的 dependencies 与 devDependencies 有什么区别?

在 npm 中，dependencies 和 devDependencies 有以下区别：

• dependencies：包罗项目运行时所需的依赖项。这些依赖项在项目摆设到生产环境时也须要存在。
  
• devDependencies：包罗项目开发过程中所需的依赖项。这些依赖项仅在开发过程中利用，如测试框架、构建工具等。在项目摆设到生产环境时，这些依赖项通常不须要存在。
  

通过在 package.json 文件中分别列出 dependencies 和 devDependencies，可以清楚地相识项目所需的依赖项及其用途。
Webpack 中的 bundle、chunk 和 module

• module（模块）：
  
  
  
  • 界说：模块是 Webpack 中根本的构建块，它指的是一个单独的文件大概代码段。
    
  • 作用：在 Webpack 中，每个模块都可以通过 require/import 语句举行依赖引入和利用，是代码构造和重用的根本单元。
    
  
  
• chunk（代码块）：
  
  
  
  • 界说：chunk 是指一个代码块，它是由多个模块组合而成的。
    
  • 作用：当 Webpack 实行构建时，会根据入口文件和依赖关系天生多个 chunk。这有助于实当代码分割，进步应用的加载性能。
    
  
  
• bundle（打包文件）：
  
  
  
  • 界说：bundle 是指终极天生的文件，它包罗了全部的 chunk 和模块。
    
  • 作用：在 Webpack 实行构建时，会把每个 chunk 打包成一个 bundle 文件。这个文件是可以在欣赏器中直接运行的，包罗了应用所需的全部代码和资源。
    
  
  

JavaScript 代码压缩（minify）的原理

JavaScript 代码压缩的原理告急是在不改变代码语义的环境下，重写代码以缩小代码量。这通常包罗：

• 将长的变量名重定名为短的变量名。
  
• 删除永世不大概到达的分支（如 if(false)）。
  
• 移除多余的空格、换行符和解释等。
  

通过这些本领，可以明显减小代码的体积，从而进步加载速率和实行服从。
前端优化 API 哀求的方法

对于同一前端页面的 3 个组件哀求同一个 API 并发送了 3 次哀求的环境，可以通过以下方法举行优化：

• 代码分割与懒加载：将组件拆分为多个小的代码块，并在须要时按需加载，以淘汰初始加载的文件巨细。
  
• 利用缓存：利用欣赏器的缓存机制，对 API 哀求的效果举行缓存，制止重复哀求。
  
• 数据共享：在组件之间共享数据，制止每个组件都单独发起哀求。可以利用状态管理工具（如 Redux）来实现数据共享。
  
• 归并哀求：如果大概的话，将多个哀求归并为一个哀求，以淘汰网络开销。比方，可以利用 GraphQL 来实现这一点。
  

前端辨认图片 MIME 范例的方法

前端可以通过以下方式精确辨认图片的 MIME 范例：

• 文件扩展名：根据文件的扩展名（如 .jpg、.png）来推测 MIME 范例。这种方法固然简单，但不敷精确。
  
• 文件头信息：读取文件的前几个字节（即文件头），根据文件头信息来确定 MIME 范例。这种方法更精确，但须要额外的处理处罚。
  
• 利用库：可以利用一些现成的库（如 mime）来辨认文件的 MIME 范例。这些库通常会根据文件扩展名和文件头信息来确定 MIME 范例，并提供更方便的接口。
  

webpack-dev-server 的启动与运行

webpack-dev-server 是一个小型的 Express 服务器，它利用 webpack-dev-middleware 来为通过 webpack 打包的资源提供服务。它的启动与运行通常包罗以下几个步调：

• 安装依赖：起首，须要在项目中安装 webpack-dev-server 及其相干依赖。
  
• 设置 webpack：在 webpack 设置文件中，须要设置 devServer 选项来设置 webpack-dev-server 的举动。比方，可以设置端标语、署理规则等。
  
• 启动服务器：通过运行 webpack serve 下令（或在旧版本中运行 webpack-dev-server 下令）来启动 webpack-dev-server。服务器启动后，会自动打开欣赏器并访问设定的开发服务器地点。
  

自界说 Webpack Loader 或 Plugin 插件的编写

• Loader：
  
  
  
  • Loader 本质上是导出为函数的 JavaScript 模块。它们用于对模块的源代码举行转换。
    
  • 编写自界说 Loader 时，须要实现一个函数，该函数吸收源代码作为输入，并返回转换后的源代码作为输出。
    
  • 在 webpack 设置文件中，通过 module.rules 选项来指定哪些文件应该利用自界说 Loader 举行处理处罚。
    
  
  
• Plugin：
  
  
  
  • Plugin 用于实行更广泛的任务，如打包优化、资源管理、注入环境变量等。
    
  • 编写自界说 Plugin 时，须要创建一个类，并在其原型上界说一个 apply 方法。apply 方法会在插件被安装到 compiler 对象时被调用。
    
  • 在 apply 方法中，可以访问 compiler 对象和 compilation 对象，并利用它们提供的钩子（hooks）来实行自界说的任务。
    
  
  

Core Web Vitals

• 界说：Core Web Vitals 是一套旨在衡量用户在网页上得到良好体验的关键性能指标。
  
• 包罗的指标：
  
  
  
  • 初次内容绘制（First Contentful Paint, FCP）：欣赏器初次渲染出页面内容的时间点。
    
  • 最大内容绘制（Largest Contentful Paint, LCP）：页面加载过程中，视口中可见的最大内容元素渲染完成的时间点。
    
  • 初次输入延伸（First Input Delay, FID）：用户初次与页面交互（如点击按钮）到欣赏器开始处理处罚该交互的时间隔断。
    
  
  

这些指标共同反映了网页的加载性能、交互性能和视觉稳固性，是评估网页用户体验的告急依据。
Webpack 处理处罚 node_modules 中的依赖

当利用 import 语句导入模块时，Webpack 会处理处罚 node_modules 中的依赖。Webpack 会从 node_modules 目次中查找模块，并根据设置（如 resolve.extensions 和 resolve.modules）确定模块路径，然后将模块打包到终极的构建文件中。在处理处罚 node_modules 中的依赖时，Webpack 还提供了一些优化战略，如代码分割、缓存、Tree Shaking 等。别的，还可以利用 externals 选项来指定哪些模块是外部依赖，不须要被打包进 bundle 文件。对于后端构建应用，还可以利用 webpack-node-externals 插件来智能打扫 node_modules 中的依赖。