前端面试之webpack

1.webpack配置有哪些：

• entry：制定入口文件，可以是单个或者多个js文件。这个配置决定了webpack从哪个配置开始生成依赖关系图。
• output：设置webpack打包后输出的目录和文件名称，包括path、filename和public path等
• module：配置了不同的loaders来处理不同的模块，例如，对于css文件，可以使用css-loader和style-loader
• resolve：设置webpack如何解析模块依赖，包括别名、扩展名等。
• plugins：使用不同的插件可以增强webpack的功能，例如，使用html-webpack-plugin可以讲打包后的js文件自动引用到html文件中。
• optimization：可以使用optimization.splitChunks和optimization.runtimeChunk配置代码拆分和运行时代码提取等优化策略
• externals：用于配置排除打包的模块，例如可以将jquery作为外置扩展，避免将其打包到应用程序中。
• devtool：配置source-map类型
• context：webpack使用的根目录，string类型必须是绝对类型
• target：指定webpack编译的目标环境
• performance：输出文件的性能检查配置
• noParse；不用解析和处理的模块
• stats：控制台输出日志控制

2.有哪些常用的loader和Plugin？

• loader：

  • babel-loader：将ES6+的代码转换成ES5的代码
  • css-loader；解析css文件，并处理css中的依赖关系
  • style-loader：将css代码注入到HTML文档中
  • file-loader：解析文件路径，将文件赋值到输出目录，并返回文件路径
  • url-loader：类似于file-loader，但是可以将小于指定大小的文件转成base64编码的DataUrl格式

• plugin：

  • HtmlWebpackPlugin：生成HTML文件，并自动将打包后的js和css文件引入到HTML文件中
  • CleanWebpackPlugin：清除输出目录
  • ExtraTextWebpackPlugin：将CSS代码提取到单独的CSS文件中
  • DefinePlugin：定义全局变量
  • UglifyJsWebpackPlugin：压缩js代码
  • HotModuleReplacementPlugin：热模块替换，用于在开发环境下实现热更新

3.loader和plugin的区别

• 功能不同：

  • loader本质是一个函数，是一个转换器，webpack只能解析原生js文件，对于其他类型文件就需要loader进行转换
  • plugin是一个插件，用于增强webpack功能。webpack在运行的生命周期中会出现许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出结果

• 用法不同：

  • loader的配置是在module.rules下进行。类型为数组，每一项是一个对象，里面描述了对于什么类型的文件，使用什么加载和使用的参数（options）
  • plugin的配置是在plugins下。类型为数组，每一项是一个plugin实例，参数通过构造函数传入

4.webpack的构建流程：

首先会读取配置文件，然后解析入口文件，对这些入口文件依赖的模块进行依赖分析，构建一个依赖关系图，然后会处理 不同的loader和plugin，生成一个或多个输出文件

5.什么是webpack的热更新？原理是什么？

• webpack的热更新就是在不刷新页面的前提下，将新代码替换就代码。
• 主要基于Webpack的模块热替换API。当Webpack检测到文件变化时，它会重新构建变化的模块，并通过WebSocket将新的模块发送到浏览器。浏览器接收到新的模块后，会调用Webpack提供的module.hot.accept方法来替换旧的模块，从而实现热更新

6.什么是code splitting

• code splitting代码分割，是一种优化技术。它允许将一个大的chunk拆分成多个小的chunk，从而实现按需加载，减少初始化时间，并提高应用程序的性能。在webpack中通过optimization。splitchunks配置项来开启代码分割

7.webpack的sourcemap是什么？如何配置生成sourcemap？

• sourceMap是一种文件，它建立了构建后的代码与原始源代码之间的映射关系。通常在开发阶段开启，用来调试代码，帮助找出代码问题所在
• 在webpack配置文件中的devtool选项中指定devtool：‘source-map’来开启

8.webpack的treeshaking原理

• webpack的treeshaking是一个利用ES6模块静态结构特性来去除生产环境下不必要代码的优化过程。其工作原理在于：
  • 当webpack分析代码是，它会标记出所有的import语句和export语句
  • 然后，当webpack确定某个模块没有被导入时，它会在生成的bundle中排出这个模块的代码
  • 同时webpack还会进行递归的标记清理，以确保所有未使用的依赖项都不会出现在最终的bundle中

9.如何提高webpack的打包速度：

• 利用缓存：利用webpack的持久缓存功能，避免重复构建没有变化的代码
• 使用多进程/多线程构建：使用thread-loader、happypack等插件可以将构建过程分解为多个进程或线程
• 使用DLLplugin和HardSourceWebpackplugin：DLLlpugin可以将第三方库预先打包成单独的文件，减少构建时间，HardSourceWebpackplugin可以缓存中间文件，加速后续构建过程
• 使用treeshaking：配置webpack的treeshaking机制，去除未使用的代码，减小生成的文件体积
• 移除不必要的插件：移除不必要的插件和配置，避免不必要的复杂性和性能开销

10.如何减少打包后的代码体积：

• 代码分割（codesplitting）：将应用程序的代码划分为多个代码块，按需加载
• tree shaking：配置webpack的treeshaking机制，去除未使用的代码
• 压缩代码：webpack-uglify-parallel使用uglify-js去进行js的代码压缩
• 使用生产模式，在webpack使用生产模式，通过设置mode：production来启用优化
• 使用压缩工具：gzip压缩静态资源压缩
• 利用cdn加速：将项目中引用的静态资源路径修改为cdn 上的路径，减少图片、字体等静态资源的打包

11.vite比webpack快在哪里

• 开发模式的差异
  • webpack是先打包再启动开发服务器，而vite则是直接启动，然后在按需加载文件（启动项目后检查源码source就可以看到）
• 对es modules的支持
  • 现代浏览器本身就支持es modules，会主动请求去获取所需文件，vite就是充分利用这一点，将开发环境下的模块文件直接作为浏览器要执行的文件，而不是像webpack那样先打包，在交给浏览器执行
    • es modules是什么
      • 通过使用export和import语句，esmodules允许在浏览器端导入和导出模块。当使用esmodules进行开发时，开发者实际是在构建一个依赖关系图，不同依赖项之间通过导入语句进行关联。主流浏览器（ie除外）都支持esmodules，并且可以通过在script标签中设置type=“module”来加载模块。默认情况下，模块会延迟加载，执行时机在文档解析之后，处罚dom事件前
• 底层语言的差异
  • webpack是基于node。js构建的，vite是基于esbuild进行预构建依赖，esbuild采取go语言开发
• 热更新的处理
  • webpack，模块或者依赖的模块发生改变，会重新编译这些模块，而vite中发生改变只需要浏览器重新请求该模块就行

12.eslint的概念以及原理

• lint会对代码做静态分析，检查出其中的一些结构错误或者格式错误，在前端领域中这个就是eslint

13.babel概念以及原理

• babel是一个流行的用于将新版本ES6+代码转换成的向后兼容版本（ES5）代码的javascript编译器，它还为jsx语法提供了编译支持，还有一些其他插件可用于转换特定类型的代码
  • 工作原理：三类功能
    • 解析：babel接收到源代码是，会调用一个叫做解析器的工具，用于将源代码转换成抽象语法树（AST）。在这个过程中，解析器会识别代码中的语法结构面并将其转换成对应的节点类型
    • 转换：一旦AST被创建，Babel将遍历整个树形结构，对每个节点进行转换。这些转换可以是插件、预设或手动创建的。转换器会检查AST的每个节点，然后对其进行相应的修改或替换，以将新语法转换成旧语法。代码转换后，Babel会生成一个新的AST
    • 生成：最后，Babel会基于转换后的AST生成代码文本，在这个步骤中，babel将遍历转换后的AST，并创建对应的代码字符串，并将这些字符串组合成一个完整的Javascript文件

14.css工程化的理解：

• css工程化是为了解决以下问题：
  • 宏观设计：CSS代码如何组织、如何拆分、模块结构怎样设计？
    • 我们希望能优化CSS文件的目录结构，对现有的CSS文件实现复用；
  • 编码优化：怎样写出更好的CSS？
    • 我们希望能写出结构清晰、简明易懂的CSS，需要它具有一目了然的嵌套层级关系，而不是无差别的一铺到底写法；我们希望它具有变量特征、计算能力、循环能力等更强的可编程性，这样我们可以少些一些无用的代码
  • 构建：如何处理我的CSS，才能让它的打包结果更优？
  • 可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？
    • 更强的可编程性意味着更优质的代码结构，实现复用意味着更简单的目录结构和更强的拓展能力，这两点能做到，自然会带来更强的可维护性。
• 以下三个方向都是时下比较流行的、普适性非常好的css工程化实践：
  • 预处理器：less、Sass
  • 重要的工程化插件：PostCss
  • webpack loader