webpack 常见面试题

目录

1、webpack的安装

2、webpack 的概念--什么是 webpack

3、Webpack的基本功能有哪些？

4、webpack 的优点是什么

5、webpack 的构建流程是什么？从读取配置到输出文件这个过程尽量说全

6、说一下 webpack 的热更新原理

7、webpack 与 grunt、gulp 的不同

8、有哪些常见的 Loader？他们是解决什么问题的？

9、Loader 和 Plugin 的区别

10、webpack3 和 webpack4 的区别

11、分别介绍一下 bundle，chunk，module 的作用是什么

12、如何利用 webpack 来优化前端性能

13、webpack 的核心概念

---

1、webpack的安装

• 全局安装 npm install webpack webpack-cli -g yarn add webpack webpack-cli -g

• 局部安装 npm install webpack webpack-cli -D yarn add webpack webpack-cli -D

2、webpack 的概念--什么是 webpack

• webpack 是一个打包模块化 js 的工具，在 webpack 里一切文件皆模块，通过 loader 转换文件，通过 plugin 注入钩子，最后输出由多个模块组合成的文件，webpack 专注构建模块化项目

• WebPack 可以看做是模块的打包机器：它做的事情是，分析你的项目结构，找到 js 模块以及其它的一些浏览器不能直接运行的拓展语言，例如：Scss，TS 等，并将其打包为合适的格式以供浏览器使用（工作原理）

• 把一切都视为模块：不管是 css、JS、Image 还是 html 都可以互相引用，通过定义 entry.js，对所有依赖的文件进行跟踪，将各个模块通过 loader 和 plugins 处理，然后打包在一起。 按需加载：打包过程中 Webpack 通过 Code Splitting 功能将文件分为多个 chunks，还可以将重复的部分单独提取出来作为 commonChunk，从而实现按需加载。把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载（打包原理）

举例： 我们有两个模块，A 模块引入 B 模块，我们现在使用 webpack 打包 A 模块，webpack 会自动寻找 A 和 B 之间的关系，进而打包 B 模块

3、Webpack的基本功能有哪些？

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

• 文件优化：压缩 JavaScript、CSS、html 代码，压缩合并图片等

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

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

• 自动刷新：监听本地源代码的变化，自动构建，刷新浏览器

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

• 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统

4、webpack 的优点是什么

• 专注于处理模块化的项目，能做到开箱即用

• 体积更小（Tree-shaking、压缩、合并），加载更快

• 编译高级语言和语法（TS、ES6、模块化、scss）

• 兼容性和错误检查（polyfill,postcss,eslint）

• 统一、高效的开发环境

• 集成公司构建规范（提测、上线）

5、webpack 的构建流程是什么？从读取配置到输出文件这个过程尽量说全

webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

1. 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数

2. 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译

3. 确定入口：根据配置中的 entry 找出所有的入口文件

4. 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理

5. 完成模块编译：在经过第 4 步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系

6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会

7. 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统

在以上过程中，webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 webpack 提供的 API 改变 webpack 的运行结果

6、说一下 webpack 的热更新原理

1. 基本定义

   • webpack 的热更新又称热替换（Hot Module Replacement），缩写为 HMR。这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块

2. 核心定义

   • HMR 的核心就是客户端从服务端拉取更新后的文件，准确的说是 chunk diff，实际上 WDS 与浏览器之间维护了一个 websocket，当本地资源发生变化时，WDS 会向浏览器推送更新，并带上构建时的 hash，让客户端与上一次资源进行对比

   • 客户端对比出差异后会向 WDS 发起 Ajax 请求来获取更改内容，这样客户端就可以再借助这些信息继续向 WDS 发起 jsonp 请求获取该 chunk 的增量更新

   • 后续的部分（拿到增量更新之后如何处理？哪些状态该保留？哪些又需要更新？）由 HotModulePlugin 来完成，提供了相关 API 以供开发者针对自身场景进行处理，像 react hot-loader 和 vue-loader 都是借助这些 API 实现 HMR

7、webpack 与 grunt、gulp 的不同

三者都是前端构建工具，grunt 和 gulp 在早期比较流行，现在 webpack 相对来说比较主流，不过一些轻量化的任务还是会用 gulp 来处理，比如单独打包 CSS 文件等

1. grunt 和 gulp 是基于任务和流（Task、Stream）的。类似 jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据， 整条链式操作构成了一个任务，多个任务就构成了整个 web 的构建流程。

2. webpack 是基于入口的。webpack 会自动地递归解析入口所需要加载的所有资源文件，然后用不同的 Loader 来处理不同的文件，用 Plugin 来扩展 webpack 功能。

3. gulp 和 grunt 需要开发者将整个前端构建过程拆分成多个Task，并合理控制所有Task的调用关系

4. webpack 需要开发者找到入口，并需要清楚对于不同的资源应该使用什么Loader 做何种解析和加工

5. gulp 更像后端开发者的思路，需要对于整个流程了如指掌

6. webpack 更倾向于前端开发者的思路

8、有哪些常见的 Loader？他们是解决什么问题的？

• file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件

• url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去

• source-map-loader：加载额外的 Source Map 文件，以方便断点调试

• image-loader：加载并且压缩图片文件

• babel-loader：把 ES6 转换成 ES5

• css-loader：加载 CSS，支持模块化、压缩、文件导入等特性

• style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS

• eslint-loader：通过 ESLint 检查 JavaScript 代码

9、Loader 和 Plugin 的区别

1. 不同的作用

   • Loader 直译为"加载器"。webpack 将一切文件视为模块，但是 webpack 原生是只能解析 js 文件，如果想将其他文件也打包的话，就会用到 loader。 所以 Loader 的作用是让webpack 拥有了加载和解析非 JavaScript 文件的能力

   • Plugin 直译为"插件"，Plugin 可以扩展 webpack 的功能，让 webpack 具有更多的灵活性。 在 webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 API 改变输出结果

2. 不同的用法

   • Loader 在 module.rules 中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个 Object，里面描述了对于什么类型的文件（test），使用什么加载（loader）和使用的参数（options）

   • Plugin 在 plugins 中单独配置。 类型为数组，每一项是一个 plugin 的实例，参数都通过构造函数传入

10、webpack3 和 webpack4 的区别

1. mode/–mode 参数，新增了 mode/--mode 参数来表示是开发还是生产（development/production） production，侧重于打包后的文件大小，development 侧重于构建速度

2. 移除 loaders，必须使用 rules（在 3 版本的时候 loaders 和 rules 是共存的但是到 4 的时候只允许使用 rules）

3. 移除了 CommonsChunkPlugin (提取公共代码)，用 optimization.splitChunks，optimization.runtimeChunk 来代替

4. 支持 es6 的方式导入 JSON 文件，并且可以过滤无用的代码

5. 升级 happypack 插件（happypack 可以进行多线程加速打包）

6. ExtractTextwebpackPlugin 调整，建议选用新的 CSS 文件提取 kiii 插件 mini-css-extract plugin，production 模式，增加 minimizer

11、分别介绍一下 bundle，chunk，module 的作用是什么

• module：开发中的每一个文件都可以看作是 module，模块不局限于 js，也包含 css，图片等

• chunk：表示代码块，一个 chunk 可以由多个模块组成

• bundle：最终打包完成的文件，一般就是和 chunk 一一对应的关系，bundle 就是对chunk 进行编译压缩打包等处理后的产出

12、如何利用 webpack 来优化前端性能

• 压缩代码。uglifyJs Plugin 压缩 js 代码， mini-css-extract-plugin 压缩 css 代码

• 利用 CDN 加速，将引用的静态资源修改为 CDN 上对应的路径，可以利用 webpack 对于 output 参数和 loader 的 publicpath 参数来修改资源路径

• 删除死代码（tree shaking），css 需要使用 Purify-CSS

• 提取公共代码。webpack4 移除了 CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks 和 optimization.runtimeChunk 来代替

13、webpack 的核心概念

• Entry：入口，webpack 执行构建的第一步将从 Entry 开始。告诉 webpack 要使用哪个模块作为构建项目的起点，默认为./src/index.js

• output：出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist

• Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块

• Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割

• Loader：模块转换器，用于把模块原内容按照需求转换成新内容

• Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情