Webpack高频面试题

1.Webpack的构建流程是什么?

被面试官问到Webpack的构建流程是什么的时候该如何回答呢?
从读取配置到输出文件的过程

  • Webpack的运行流程是串行的,从启动到结束经历的流程分别是
  • 初始化参数:从配置文件和 shell 语句中读取并合并参数得到最终一个参数。
  • 开始编译:用上一步得到的参数的初始化 compiler 这个对象去加载我们配置的插件,执行对象的 run 方法,开始进入编译阶段。
  • 确定入口:根据配置中的 entry找出所有的入口文件。
  • 编译模块:从入口文件出发,调用所有配置的loader,对模块进行一个编译,再找出该模块所依赖的模块,递归这个步骤,直到所有入口文件都经过了编译模块的处理。(循环递归)
  • 完成编译模块:使用loader编译完所有模块之后,得到每个模块被编译的最终内容和他们之间的依赖关系。
  • 输出资源:根据入口和模块的依赖关系,组装成一个个包含多个模块的chunk,再把每个chunk转换成单一的文件加载到输出列表(这一步是最后修改内容的机会)
  • 输出完成后,根据配置确定输出的路径和文件名,把文件写入到文件系统中。
  • 在以上过程中Webpack会在特定的时间点,广播出特定的事件,插件会在监听到一些事件之后,执行特定的逻辑,同时插件可以调用Webpack提供的一些API 来改变Webpack的运行结果。

2.webpack 和 vite 的区别是什么?

构建速度

  • Webpack: Webpack的构建速度相对较慢,尤其在大型项目中,因为它需要分析整个依赖图,进行多次文件扫描和转译。
  • Vite:Vite以开发模式下的极速构建著称。它利用ES模块的特性,只构建正在编辑的文件,而不是整个项目。这使得它在开发环境下几乎是即时的。

开发模式

  • Webpack:Webgek通常使用热模块替换(HMR)来实现快速开发模式,但配置比较复杂。
  • Vite: Vite的开发模式非常轻量且快速,支持HMR,但无需额外配置,因为它默认支持。

配置复杂度

  • Webpack: Webpack的配置相对复杂,特别是在处理不同类型的资源和加载器时。
  • Vite: Vite鼓励零配置,使得项目起步非常简单,但同时也支持自定义配置,使其适用于复杂项目。

插件生态

  • Webpack: Webpack拥有庞大的插件生态系统,适用于各种不同的需求。
  • Vite: Vite也有相当数量的插件,但相对较小,因为它的开发模式和构建方式减少了对一些传统插件的需求。
    编译方式
  • Webpack:Webpack使用了多种加载器和插件来处理不同类型的资源,如JavaScript、CSS、图片等。
  • Vite:Vite利用ES模块原生支持,使用原生浏览器导入来处理模块,不需要大规模的编译和打包。
    应用场景
  • Webpack:适用于复杂的大型项目,特别是需要大量自定义配置和复杂构建的项目。
  • Vite:更适用于小到中型项国m或者需要快速开发原型和小型应用的场景。
    打包原理
  • Webpack: Webpack的打包原理是将所有资源打包成一个或多个bundle文件,通常是一个JavaScript文件。
  • Vite: Vite的打包原理是保持开发时的模块化结构,使用浏览器原生的导入机制,在生产环境中进行代码分割和优化。

3.Webpack的性能优化

4.Webpack五大核心是什么

你可能感兴趣的:(前端找工作之路,webpack,前端)