webpack面试题(持续汇总ing。。。)
webpack的编译过程
1. 初始化
在此期间, webpack会整合CLI参数, 配置文件以及默认设置以创建最终的一套配置参数. 这个过程主要依赖于第三方库yargs来完成. 这一阶段相对来说较为简单, 主要是为了接下来的关键步骤做好充分准备. 大致上可以理解为, 初始化的主要职责就是生成一套最终的核心设置.
编译
创建chunk
- chunk是Webpack内部构建过程中所指的一个核心概念，在实际开发中可以通过指定入口路径来明确引用的模块位置
- 每个Chunk具备两个必要属性：
- 名称（name）：默认设置为"main"
- 唯一标识符（id）：在开发环境中与name一致，在生产环境中则采用唯一的数字标识
- 系统性地整合所有相关模块以完成项目构建任务
- 产生 chunk 资源资产。
2. 在完成第二步之后，在该 Chunk 中将产出一个模块清单。
3. 这个清单将包含由模块 id 标识以及对应的转换后代码。
4. 随后，在此阶段将基于配置信息为该 Chunk 生成相应的资源清单。
5. 即 Chunk 资源资产所形成的资源清单实际上表示的是最终文件的名称及其内容。
首先将多个 chunk 的 assets 整合在一起，并在此基础上创建一个总 hash 值。
2. 3. 输出
这个步骤相当直接，并且通过调用node.js的文件系统模块来实现目标。基于编译后生成的总资产数量（ assets ），该方法将负责创建所需的文件。
4. 总过程
执行命令后立即启动初始化流程，在此阶段系统会解析命令行参数并读取并整合配置文件内容；将整合后的配置数据传递给编译器进行处理；每个chunk内部需独立构建模块结构，并通过入口文件逐一识别相关模块；识别完毕后生成完整资源列表并赋予每个资源对应唯一的id标识及哈希值；将所有 chunk 生成的资源进行汇总形成最终完整资源集合，并计算整体哈希值；根据生成的完整资源列表精准导出至目标文件位置；由于 chunk 块记录详尽精确地包含文件路径信息及内容特征信息；因此输出过程异常简便高效。
设计术语
- 模块：在Webpack中定义为可分割的功能单元，默认情况下支持JavaScript文件或其他静态资源类型的模块表示
- 块：Webpack内部用于组织模块结构的核心概念之一 它是一个包含多个来源模块以及中间组件的对象
- 资源清单：当构建完成后 该对象会生成一个完整的列表 包含所有相关的文件路径信息 这一过程通常被称作"构建"
- 哈希值：将整个资源清单中的所有路径信息进行哈希计算 得到最终唯一的标识符
- 块哈希值：对单个块中的资源清单执行哈希运算 以确保该特定模块集合的独特性
- 块名：默认情况下 块名与入口模块相同 如果有自定义名称 则会按照指定规则重命名
- ID字段：用于唯一标识每个块 在开发环境中与块名保持一致 而在生产环境中则采用递增编号的方式
webpack的核心概念
入口处的模块是Webpack构建过程的起点，默认情况下会从./src/index.js文件开始执行构建操作
Webpack的基本功能有哪些？
TypeScript 转译为 JavaScript 等等
gulp/grunt 与 webpack的区别是什么?
- 都是用于前端开发的重要工具，在早期阶段较为流行的是grunt和gulp，在后来逐渐被Webpack取代了优势。但针对一些轻量化需求较高的场景，则会选择使用gulp来进行处理。
- Grunt与Gulp均基于任务驱动与流处理机制，在一定程度上类似于jQuery框架：选择一个或多个作为起点的基础文件集合，并对其进行一系列链式操作以实现数据更新与传播；完成单个基础流程后即可启动下一个流程。
- 集装箱打包框架Webpack则采用了以入口为核心设计的原则：能够自动解析并加载所有所需的资源文件，并根据不同类型的资源采用相应的解析器；此外还支持通过插件模块的方式扩展其功能。
怎么配置单页应用？怎么配置多页应用？
- 单页应用本质上是webpack的标准模式，在entry中明确指定其入口即可实现。
- 对于多页应用而言，在项目目录结构需遵循其预设要求的前提下，在 entry 中使用 AutoWebPlugin 完成简单的自动化构建。
- 需要注意的一点是：每个页面都包含共有的代码部分。
- 可以通过提取公共代码来优化每次页面加载时的操作。
- 每个页面都引用了同一套css样式表以减少不必要的加载次数。
- 随着业务规模的增长和需求的变化，在构建阶段确保入口配置足够灵活至关重要。
- 由于业务扩展可能导致新页面不断追加，在设计时需充分考虑灵活性问题。
- 随着业务规模的增长和需求的变化，在构建阶段确保入口配置足够灵活至关重要。
Loader机制的作用是什么？
webpack默认仅支持打包JavaScript文件。在配置中定义了module.rules数组，在遇到不同类型的文件时会自动选择合适的Loader来进行加载、解析并转换为JavaScript文件。其中，
use属性的值必须是一个由多个Loader名称构成的数组，
并且Loader之间的执行顺序是从后往前排列，
每个Loader还可以通过传递URL中的查询参数来指定相关选项，
例如css-loader?minimize中的minimize选项告诉css-loader开启CSS压缩功能。
常用loader
该工具负责将文件复制到指定文件夹，并在代码中使用相对路径引用这些文件。
URL 加载器与文件加载器功能相似, 但特别适用于处理小文件时以Base64编码的方式直接注入代码。
源映射加载器用于加载额外的源映射文件, 以便于断点调试使用。
图片加载器不仅装载图片文件还进行压缩处理。
babel 转换器负责将ES6代码转换为兼容的ES5版本。
CSS 加载器具备模块化管理、压缩优化以及文件导入等功能。
CSS 注入器将CSS样式表注入到JavaScript代码中, 并通过DOM操作完成加载过程。
eslint 装饰器利用ESLint工具对JavaScript代码进行语法检查和修复。
Less 打包器能够整合并管理多个 LESS 文件进行打包处理。
Sass 打包器支持整合SCSS样式表并生成优化后的CSS代码。
Vue 解析模块负责解析Vue.js组件并将其实现为DOM结构表示出来。
webpack怎么对vue的编译（快手）
在Vue项目中使用Webpack时会打包组件及其相关资源，并生成供浏览器直接运行的代码。
讲解如何在Vue项目中利用vue-loader解析单文件组件(.vue文件)，这是解析过程的核心步骤。
说明vue-loader将单文件组件中的模板部分编译为render函数，并将其作为实际渲染时使用的逻辑。
具体来说,vue-loader会调用@vue/compiler-sfc中的compileTemplate方法来完成这一编译过程。
介绍在处理脚本部分时,babel会被用来对JavaScript代码进行转译,并将其转换为符合ES5规范的形式。
解释CSS加载器是如何从样式部分提取信息并将其转化为适用于浏览器使用的CSS代码。
描述解析过程中得到的所有组件间依赖关系的信息会被传递给Webpack以便后续模块打包工作。
总结通过以上步骤,webpack能够高效地对Vue项目的各个组成部分进行解析和打包,最终生成一个完整的浏览器可执行包。
进一步说明整个流程的具体实现细节包括哪些功能模块是如何协同工作的以及它们在整个构建过程中扮演的角色。
Plugin（插件）的作用是什么？
插件是用于增强Webpack功能的关键工具，在构建过程中通过注册钩子完成集成，并为Webpack提供了极大的灵活性。
集装箱通过plugins属性来管理可选插件集合。 plugins属性实际上是一个数组列表，在初始化组件时会依次加载这些插件，并根据组件需求动态地进行配置。
12.
常见Plugins
HtmlWbpackPlugin会在打包完成后自动生成html文件，并导入bundle.js。
cleanwebPackPlugin在完成打包后会自动删除上一次生成的文件。
13.
如何提高webpack的构建速度?
- 通过SplitChunksPlugin在多入口情况下提取公共代码。
- 借助外部配置参数提取通用库组件。
- 借助DIPlugin和DIReferencePlugin进行资源模块的预编译工作，在引用不会被修改的npm包时采用DIRefResolver对该类 npm 包进行优化处理，并通过 DIReferenceResolver 将已优化后的模块导入系统。
- Happypack支持将任务调度器从单线程模式优化至多线程模式以提高任务处理效率。
- 应用 webpack-uglify-parallel 来提升 uglify 插件的工作效率。其原理在于采用多核并行压缩技术以加快程序运行速度（适用于支持多核处理器的构建环境）。
如何利用webpack优化前端性能
- 用Webpack进行前端性能优化的目标是提升Webpack编译后文件的质量，在浏览器中实现快速且高效的执行。
- 对代码进行精简处理以去除冗余部分，并使用webpack的uglifyjs-webpack-plugin以及websity平行化uglify-plugin对JavaScript文件进行压缩；同时利用optimize-css-assets-webpack-plugin对CSS文件进行压缩。
- 在构建过程中将静态资源路由重定向至对应的CDN服务器路径；可以通过配置生成器的输出选项以及各加载器的publicPath属性来实现这一目标。
- 去除冗余代码：可以通过启动Webpack时追加--optimize-minimize参数来实现；CodeSplitting：将代码按路由维度或组件分块（chunk），以实现按需加载并充分利用浏览器缓存。
- 提取公共代码：可以通过SplitChunksPlugin插件来进行模块抽取；浏览器缓存长期存储这些无需频繁变动的公共模块。
文件指纹是什么？
打包后的文件会获得特定的文件指纹。
chunkhash：与Webpack打包相关的chunk键值对不同会导致不同的chunkhash。
js扩展名：filename为'[name][chunkhash:8]'.
contenthash：基于文件内容计算得出；若内容无变化，则contenthash也不会变化。
css扩展名：filename为'[name][contenthash:8]'.
hash值与项目的整体构建相关；每当项目中的任何文件发生修改时，整个构建的 hash值都会发生变化。
img扩展名：名称格式为'[name][ext]_v1h-8'。
source map是什么？
将代码在经过编译、打包及压缩后被逆向映射回源码的过程，在实际应用中发现压缩后的代码难以保持良好的可读性，在调试源码时仍需依赖source map的帮助。线上环境下：为避免生产部署中出现Inline脚本或Eval脚本（因其会增加包体积并降低性能），建议采取相应防护措施。
借助 Sentry 错误监控平台实现 hidden-source-map 功能。
nosources-source-map：仅提供具体行号及错误信息回溯路径。
安全性能上高于 source map方案。
通过Nginx配置仅允许内部域名访问.map文件。
17.
描述一下编写loader或plugin的思路
- loader像一个"转换者"角色，在接收源文件内容后进行处理，并通过链式操作逐步将源文件转化为所需的形式。
编写loader必须遵循单一职责原则：每个loader仅负责完成一种特定的转换任务。它接收源文件内容（source），可以通过指定返回值的方式来呈现处理后的结果；也可以调用this.callback()方法传递结果。此外还可以利用this.async()生成一个回调函数来发送最终结果。 - plugin编写非常灵活：在webpack生命周期中会有多个事件被触发，在适当的情况下可以通过调用webs ets API来进行输出格式的相应调整。
文件监听原理是什么？
在源码发生更新时系统会自动触发重构流程以生成新的输出文件。
原理 定期检查文件最后修改时间是否存在变化若某个文件发生更新则暂不通知监听者待aggregateTimeout后才进行处理。
方式 通过在webpack启动指令中添加--watch参数即可实现实时监控功能。
此方法存在明显的不足之处即每次都需要手动刷新网页以查看最新内容
什么是webpack热更新原理？
- webpack采用动态重排（Hot Reindexing）作为其热更新机制，并简称为HMR。该机制允许客户端无需刷新网页即可替换掉旧模块，并将其替换成新的变更模块。
- WDS通过WebSocket协议实现了客户端与服务器端之间的双向通信。每当本地资源发生变化时，WDS会向客户端发送更新信息，并附带文件哈希值以确保数据准确性。客户端会比较最新的资源与之前的差异，并通过Ajax请求获取具体的变化内容（如文件列表和哈希值）。随后，在收到这些信息后，客户端会再次向WDS发起jsonp请求以获取具体的增量更新内容。
如何对bundle体积进行监控和分析？
VSCode中有一个插件叫做Import Cost, 它能够支持动态跟踪模块大小引入的功能. 此外, 还可以通过使用webpack-bundle-analyzer工具创建一个module bundle的组成图, 从而展示该组件所占的空间. bundlesize包则提供了实现自动化资源占用监控功能的可能性.
Bable原理是什么？
多数JavaScript Parser均遵循estree规范，在其发展初期阶段基于acorn项目的构建理念下（该项目代表了轻量级现代JavaScript解析器的技术起点），Babel大致可划分为三个核心部分：
首先，在"转换"环节中, 系统会对访问到的AST节点执行变换操作以产生新的AST结构；
其次, 实施"词法分析"功能时, 系统会将输入的原始代码文本分割为一系列独立的语法单元, 形成一个有序的token序列；
再次, 在"生成"阶段中, 系统将以上述解析得到的新AST作为基础模板, 自动生成相应的源码实现；
特别地,Taro正是通过使用babel框架实现了对小型程序语言文法规则的有效映射与自动转换功能；
最后,"解析"这一过程则负责将原始输入文本准确地解析并转化为对应的ast表示形式。