Bootstrap

2024前端Webpack面试题

1、谈谈你对Webpack的理解

Webpack是一个模块打包工具,可以使用它管理项目中的模块依赖,并编译输出模块所需的静态文件。

它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件(图片,字体)等,让开发更高效。

对于不同类型的依赖,Webpack有对应的模块加载器,而且会分析模块间的依赖关系,最后合并生成优化的静态资源。

2、Webpack的基本功能

代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等

文件优化:压缩 JavaScript、CSS、HTML 代码,压缩合并图片等

代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载

模块合并:在采用模块化的项目有很多模块和文件,需要构建功能把模块分类合并成一个文件

自动刷新:监听本地源代码的变化,自动构建,刷新浏览器

代码校验:在代码被提交到仓库前需要检测代码是否符合规范,以及单元测试是否通过

自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。

3、Webpack构建过程

从entry里配置的module开始递归解析entry依赖的所有module

每找到一个module,就会根据配置的loader去找对应的转换规则

对module进行转换后,再解析出当前module依赖的module

这些模块会以entry为单位分组,一个entry和其所有依赖的module被分到一个组Chunk

最后Webpack会把所有Chunk转换成文件输出在整个流程中Webpack会在恰当的时机执行

;