热搜:前端 nest neovim nvim

webpack面试题及答案(webpack知识点总结)

lxf2023-05-27 14:00:02

webpack面试题及答案(webpack知识点总结)

谈谈你对Webpack的理解

1.什么是Webpack?

webpack 是静态模块打包器,当 webpack 在处理应用程序时,将递归构建一个依赖关系图,包括应用程序所需的每个模块,然后将它们打包成一个或多个模块 bundle。

webpack 就像生产线一样,要经过一系列的处理工艺(loader)只有这样才能将源文件转换为输出结果。 这条生产线上每个处理过程的职责都是单一的,多个过程之间存在依赖关系,只有在完成当前处理后才能交给下一个过程。
插件就像一个插入生产线的功能,在特定的时间处理生产线上的资源。 webpack 在广播事件的运行过程中,插件只需监控其关心的事件,就可以加入这条生产线,改变生产线的运行。

2.可以说包装过程/施工过程/施工过程
3.可以说优化前端运行

Webpack的包装过程/包装原理/构造过程?

webpack面试题及答案(webpack知识点总结)
webpack 运行过程是一个串行过程,其工作过程是将每个插件串联起来。

命令行执行npx webpack打包命令开始
1.初始化编译参数:从配置文件和shell命令中读取合并参数
2.开始编译:根据上一步获得的参数初始化Compiler对象,加载所有配置的Plugin,执行对象 run 方法开始编译。
3.确定入口:根据配置 entry 找出所有的入口文件
4.编译模块:从入口文件触发,调用所有配置的代码翻译模块,然后找出模块所依赖的模块,然后递归到此步骤,直到所有入口所依赖的文件都被翻译。
5.完成模块编译:第四步后使用 Loader 翻译完所有模块后,得到每个模块翻译后的最终内容及其之间的依赖关系图。
6.输出资源:根据依赖关系图,将Chunk组装成包含多个模块的Chunk,然后将每个Chunk转换成单独的文件,添加到输出列表中,根据配置确定输出路径和文件名和输出。

在上述过程中,Webpack 特定事件将在特定的时间点播放,插件将在监控感兴趣的事件后执行特定的逻辑。

总结

  • 初始化:从配置文件和shell命令中读取合并参数,根据参数初始化compiler实例,加载Plugin(注册所有配置的插件),调用compiler实例的run方法开始编译。

Compiler编译对象控制者webpack生命周期,不执行具体任务,只进行一些调度工作。例如,执行模块创建、依赖收集、分块、包装等
调用run后,创建Compiltation实例,每次构建都会创建一个新的Compiltation实例,包含本次构建的基本信息
Webpack 特定事件将在特定的时间点播放,插件将在监控感兴趣的事件后执行特定的逻辑。

  • 编译:从entry 触发,对每一个Module 串行调用对应的 Loader对模块进行翻译,然后找出模块所依赖的模块,递归编译处理。

从配置文件( webpack.config.js )中指定的 entry 入口,开始分析文件构建 AST 语法树

  • 根据依赖关系图,将Chunk组装成包含多个模块的Chunk,将Chunk转换为文件输出。

不同的entry生成不同的chunk,动态导入也会生成自己的chunk

loader在Webpack中的作用/ 什么是loader?

Loader 是webpack提供了一种处理多种文件格式的机制,因为webpack只认识JS和JSON,所以Loader相当于翻译,对其他类型的资源进行预处理。
用于模块