引用抖音哲玄前端
二、基于webpack5完成工程化建设
Webpack对项目工程化设计
（一）项目使用webpack5的工程化设计请大致描述一下。
Webpack5对/app/pages下的业务文件进行解析，解析引擎分为三层，第一层解析编译，找到业务文件中所有entry.xx.js文件进行依赖分析，随后挂载的.vue -> vue-loader，.less -> less-loader，.css->css-loader，.js -> bebel-loader，.png ->file-loader进行编译，输出js、css、png、tpl等文件
进行第二层模块分包，根据拆分规则将模块进行abc.js -> a.js、b.js、c.js等文件，输出若干js、css、png、tpl等文件。
进行第三层模块压缩优化，分两种情况
生产环境：
压缩混合js、压缩css、输出文件产物
开发环境：
资源注入内存、本地服务热更新
无论是哪种最后都会生成产物文件，只不过产物文件不同，产物文件存放在app/public下
当Koa的全局中间件（app/middleware）进行时，koa-nunjucks-2则会对app/public下.tpl模板文件进行解析从而输出页面
前端工程化搭建
（一）webpack是什么？
Webpack 是一个流行的前端模块打包工具，可将多个模块打包成一个或多个文件，优化资源加载。
（二）Less是什么？
Less 是一种 CSS 预处理器，它扩展了 CSS 语法，提供变量、嵌套、混合（Mixins）、函数等功能，让 CSS 更易维护和扩展。
（三）基础知识
1.v-model是什么？
在 Vue 3 中，v-model 是一个语法糖，用于在表单控件或自定义组件上创建双向数据绑定。它本质上是 :value 和 @input 事件的组合，让数据的更新更加简洁。
2.{{}}是什么？
在 Vue 3 中，{{ }} 是插值语法（Mustache 语法），用于在模板中动态渲染 JavaScript 表达式的值。它是 Vue 最基本的数据绑定方式，可将组件实例中的数据实时显示在 DOM 中。
3.ref是什么？
在 Vue 3 中，ref 是一个核心 API，用于创建响应式数据引用。它允许你在组件中定义响应式变量，并在模板或方法中使用。ref 在组合式 API 中扮演着至关重要的角色。
4.process.stdout.write() 是什么？
process.stdout.write() 是 Node.js 中用于向标准输出流（stdout）发送数据的核心方法。它允许你在终端中打印内容，类似于 console.log()，但更加底层和灵活。
5.throw是什么？
在 JavaScript 中，throw 是一个关键字，用于手动抛出异常（错误）。当程序遇到异常情况时，可以使用 throw 中断正常流程，并将错误信息传递给调用者。
6.path.baseName是什么？
在 Node.js 中，path.basename() 是 path 模块提供的一个核心方法，用于从路径中提取文件名部分
7....HTMLWebpackPluginList是什么语法？
...HTMLWebpackPluginList 是 JavaScript 中的展开语法（Spread Syntax），用于将一个数组或可迭代对象展开为多个独立元素
8.pageEntries[entryName] = file是什么语法？
pageEntries[entryName] = file 是 JavaScript 中的对象属性赋值语法，用于动态地向对象添加属性或修改现有属性的值。
9.Object.key的作用？
Object.keys() 是 JavaScript 中用于获取对象自身可枚举属性的方法。它返回一个由对象的键名组成的数组，顺序与使用 for...in 循环遍历对象时相同
10.__dirname是什么？
__dirname 是 Node.js 中的一个全局变量，用于表示当前执行脚本所在的目录的绝对路径。它在模块化开发和文件路径处理中非常有用。
11.filePath.endsWith('.tpl') 是什么？
filePath.endsWith('.tpl') 是一个 JavaScript 字符串方法调用，用于判断文件路径是否以 .tpl 结尾。
12.message.match(/timeout/) 是什么？
message.match(/timeout/) 是一个 JavaScript 正则表达式匹配操作，用于检查字符串 message 中是否包含子字符串 "timeout"
13.Promise.resolve是什么？
Promise.resolve() 是 JavaScript 中 Promise 对象的一个静态方法，用于快速创建一个已解决（resolved）的 Promise。
14.Async和await的作用？
async 和 await 是 JavaScript 中用于处理异步操作的语法糖，它们基于 Promise 构建，旨在让异步代码看起来更像传统的同步代码，从而提高可读性和可维护性。await 会暂停当前函数的执行
（四）style标签中的scoped是什么？
在 Vue 中，scoped 是一个用于限制 CSS 作用域的特殊属性，主要在单文件组件（.vue 文件）中使用。当你在 标签上添加 scoped 属性后，该样式只会应用到当前组件的元素上，不会影响其他组件。
（五）Webpack的基础配置以及作用？
entry（入口文件）
Module（模块解析配置）
Output（产物输出路径）
Resolve（配置模块解析的具体行为）
Plugins（配置webpack插件）
Optimization（配置打包输出优化）
（六）vue-leader是什么？
vue-loader 将 Vue 组件转换为 JavaScript 模块，提取模板、样式和脚本。
（七）Babel-loader是什么？
将 ES6+ 代码转换为向后兼容的 JavaScript。
（八）url-loader是什么？
处理图片资源，小文件转为 base64 内联，大文件单独输出。
（九）Css-loader是什么？
css-loader：解析 CSS 中的 @import 和 url() 等引用。
（十）Style-loader是什么？
style-loader：将 CSS 插入到 HTML 的 标签中。
（十一）Less-loader是什么？
less-loader：将 Less 转换为 CSS。
（十二）File-loader是什么？
file-loader：将文件复制到输出目录，并返回引用路径。
（十三）什么是水合？
水合是指在服务端渲染生成 HTML 后，客户端 Vue 实例会将这些 HTML 与 JavaScript 逻辑进行结合，使静态的 HTML 变得可交互，这个过程就叫水合。而 VUE_PROD_HYDRATION_MISMATCH_DETAILS 是用于控制在生产环境下，是否显示水合不匹配的详细信息。
（十四）html-webpack-plugin 是什么？
html-webpack-plugin 是一个 Webpack 插件，用于自动生成 HTML 文件并注入打包后的资源（如 JS、CSS）。它在前端构建流程中扮演着模板管理和资源注入的核心角色，尤其适用于单页应用（SPA）或多页应用（MPA）的场景。
（十五）在自定义配置wenpack启动命令时--max_old_space_size=4090是做什么的？
--max_old_space_size=4090 是 Node.js 的一个命令行标志，用于设置 Node.js 进程可用的最大堆内存（heap memory）大小，单位是兆字节（MB）。
（十六）webpack-merge 是什么？
webpack-merge 是一个用于合并 Webpack 配置对象的工具库，它能帮助你将多个 Webpack 配置文件合并为一个，使配置更模块化、可维护。尤其适用于开发环境和生产环境需要不同配置的场景。
（十七）os库是什么？
在 Node.js 中，os 是一个内置核心模块，提供了与操作系统交互的实用工具。它允许你获取系统信息（如 CPU、内存、网络）、用户信息和路径分隔符等，无需额外安装依赖。
（十八）happypack是什么？
happypack 是一个用于加速 Webpack 构建过程的插件，通过将耗时的任务分配给多个子进程并发执行，充分利用多核 CPU 资源，显著提升打包速度。尤其适用于大型项目或依赖众多的应用。
（十九）mini-css-extract-plugin是什么 ？
mini-css-extract-plugin 是一个用于 Webpack 的 CSS 提取插件，它能将 CSS 代码从 JavaScript 打包文件中分离出来，生成独立的 CSS 文件。这一优化显著提升了应用加载速度和缓存效率，尤其适用于生产环境。
（二十）clean-webpack-plugin 是什么？
clean-webpack-plugin 是一个用于 自动清理 Webpack 构建目录 的插件。在每次构建前，它会删除（或清理）指定目录中的旧文件，确保输出目录只包含最新生成的资源，避免旧文件残留导致的缓存问题或部署混淆。
（二十一）css-minimizer-webpack-plugin 是 什么？
css-minimizer-webpack-plugin 是一个用于 压缩和优化 CSS 文件 的 Webpack 插件，通过移除冗余代码、缩短选择器名称和应用高级压缩算法，显著减小 CSS 文件体积，提升加载速度。它是 Webpack 5 官方推荐的 CSS 压缩解决方案，常与 mini-css-extract-plugin 配合使用。
（二十二）html-webpack-inject-attributes-plugin 是什么？
html-webpack-inject-attributes-plugin 是一个用于 自动向 HTML 文件注入自定义属性 的 Webpack 插件。****
（二十三）terser-webpack-plugin 是什么？
terser-webpack-plugin 是一个用于 Webpack 的 JavaScript 压缩插件，基于 Terser 实现。它主要用于在生产环境中减小 JavaScript 代码体积，提高加载速度。
（二十四）开发环境的热更新打包的设计流程？
用户在开发保存的时候，保存完之后，被服务器监听
监听到了开始解析编译、模块分包、压缩优化
落地成具体文件到产物文件
其他内容放在服务器内存中
内存内容会被服务器监听到，通知浏览器这边更新了
浏览器再将服务器内存的东西重新请求过来
（二十五）Express是什么？
Express 是一个基于 Node.js 的轻量级 Web 应用框架，用于快速构建服务器端应用、API 和网站。它提供了简洁的路由系统、中间件机制和模板引擎支持，被广泛应用于前后端分离的项目中。
（二十六） webpack-dev-middleware是什么 ？
webpack-dev-middleware 是一个中间件，用于在 Node.js 服务器（如 Express） 中集成 Webpack 的打包功能，使打包后的文件直接在内存中生成并 serving，无需写入磁盘。它是 Webpack 开发环境的核心组件之一，常用于自定义开发服务器或与框架（如 Express、Koa）集成。
（二十七）webpack-hot-middleware 是什么？
webpack-hot-middleware 是一个用于实现 Webpack 热模块替换（Hot Module Replacement, HMR） 的中间件，它允许在运行时更新模块而无需完全刷新整个页面。结合 webpack-dev-middleware 或自定义服务器（如 Express），可提供更流畅的开发体验。
（二十八）consoler是什么？
一个轻量级日志工具，支持颜色、级别和格式化输出（但使用较少）
（二十九）WebSocket是什么 ？
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，允许客户端（如浏览器）和服务器之间实时交换数据。
（三十）EventSource 是 什么？
EventSource 是浏览器提供的一种单向实时通信机制，允许客户端（浏览器）自动接收来自服务器的更新。它基于 HTTP 协议，实现了服务器向客户端的单向数据推送，特别适合需要实时获取数据更新的场景（如新闻推送、实时通知、状态监控等）。
（三十一）页面路由是怎么样设计的？
浏览器搜索路径，发起页面请求，通过bff层去寻找对应模板路径，进入到单页面应用通过router路由进行页面路径分发从而访问页面
（三十二）CSR和SSR的区别？
CSR浏览器渲染页面，SSR服务端渲染页面
（三十三）Vue-router是什么？
Vue Router 是 Vue.js 官方的路由管理器，用于实现单页面应用（SPA）的路由功能。它通过组件化的方式管理路由，支持动态路由、嵌套路由、导航守卫、路由懒加载等特性，是构建大型 Vue 应用的核心工具。
（三十四）Pinia是什么？
Pinia 是 Vue.js 的官方状态管理库，作为 Vuex 的继任者，提供更简洁的 API、TypeScript 支持和更好的性能。它采用组合式 API 的设计思想，支持模块化存储，并与 Vue 3 的响应式系统深度集成。
（三十五）element-plus是什么？
Element-plus 是基于 Vue 3 和 TypeScript 开发的 UI 组件库，是 Element UI 的升级版。它提供了丰富的高质量组件（如按钮、表单、表格、弹窗等），遵循统一的设计语言，支持国际化和按需加载，广泛用于企业级后台管理系统。
（三十六）lodash是什么 ？
Lodash 是一个功能强大、性能优化的 JavaScript 工具库，提供了丰富的实用函数，用于简化数组、对象、字符串等数据类型的操作。它被广泛应用于前端开发（如 React、Vue 项目）和 Node.js 后端，旨在提高代码效率和可读性。
（三十七）完整的讲述webpack工程化的流程。
当使用生产命令启动时，首先会看配置中entry拿到app/pages下所有入口文件（entry.xx.js）
再看配置中的module、resolve、plugin，进行对各个业务文件通过happypack进行多线程处理进行解析。
再通过optimization配置，进行对模块分包，分成第三方依赖与公共模块进行缓存，使用TerserWebpackPlugin的并发和缓存，提升压缩阶段的性能
多线程打包完成将产物文件根据output配置来进行输出
当使用开发命令启动时，首先获取devServer热更新的配置
指定静态文件目录挂载到express上
拿到配置中entry下的所有入口文件
看module、resolve、plugin中配置进行模块解析
再通过optimization配置，进行对模块分包，分成第三方依赖与公共模块进行缓存，使用TerserWebpackPlugin的并发和缓存，提升压缩阶段的性能
最后在根据output的配置进行输出
随后将devMiddleware（监听文件改动，将资源暂存到内存中） 中间件挂载到express上，控制tpl文件写入磁盘，配置外部资源的公共路径
将hotMiddleware（实现热更新通讯，告诉浏览器内部资源更新要重新请求）中间件挂载到express上，允许客户端接收服务器端单项通信实时更新
最终启动express服务器，即可完成热更新webpack配置
（三十八）具体描述一下webpack的热更新时的流程
当业务文件改动时devMiddleware中间件监听到改动，则触发webpack配置内容，输出文件时资源暂存内存，模板页输出到磁盘，而core流程进行解析注册路由到浏览器上，随后hotMiddlware中间件向浏览器进行通知，浏览器接收后随即让模板页通过暴露的外部资源进行资源的请求，即可做到业务进行修改时，浏览器也进行变化。
