2020-06-03面试--webpack基础篇

1，什么是bundle，什么是chunk，什么是module

答案：bundle是由webpack打包出来的文件，chunk是指webpack在进行模块的依赖分析的时候，代码分割出来的代码块。module是开发中的单个模块。

答案： 知识点链接：https://blog.csdn.net/hfdxmz_3/article/details/106207380?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase

2，webpack的构建流程

答案：

1. 初始化参数：解析webpack配置参数，合并shell传入和webpack.config.js文件配置的参数，形成最后的配置结果；

2. 开始编译：上一步得到的参数初始化compiler对象，注册所有配置的插件，插件监听webpack构建生命周期的事件节点，做出相应的反应，执行对象的 run 方法开始执行编译；

3. 确定入口：从配置的entry入口，开始解析文件构建AST语法树，找出依赖，递归下去；

4. 编译模块：递归中根据文件类型和loader配置，调用所有配置的loader对文件进行转换，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；

5. 完成模块编译并输出：递归完事后，得到每个文件结果，包含每个模块以及他们之间的依赖关系，根据entry或分包配置生成代码块chunk；

6. 输出完成：输出所有的chunk到文件系统；

注意：在构建生命周期中有一系列插件在做合适的时机做合适事情，比如UglifyPlugin会在loader转换递归完对结果使用UglifyJs压缩覆盖之前的结果。

知识点链接：https://www.cnblogs.com/chengxs/p/11022842.html

3，说说一下loader是何作用

css-loader 处理css中路径引用等问题

style-loader 动态把样式写入css

sass-loader scss编译器

less-loader less编译器

postcss-loader scss再处理

babel-loader：转化ES6代码

jsx-loader：识别js中的 jsx 语法

**url-loader: **图片处理 npm install --save-dev url-loadr

file-loader: 文件加载 npm install --save-dev file-loader

json-loader：json处理 npm install --save-dev json-loader

raw-loader： html处理 npm install --save-dev raw-loader

知识点链接：https://blog.csdn.net/songshuguowang/article/details/85263587?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

4，webpack打包是如何优化前端性能的

答案：

1. 第三方库的处理 2将 loader 由单进程转为多进程

2. 构建结果体积压缩，文件结构可视化，找出导致体积过大的原因

3. 拆分资源 5删除冗余代码 5按需加载

知识点链接：https://www.cnblogs.com/chris-oil/p/9821205.html