面试题 之 webpack

1.说说你对webpack理解？解决什么问题？

Webpack 是实现前端项目的模块化，用于现代 JavaScript 应用程序的静态模块打包工具，被webpack 直接引用的资源打包进 bunde.js的资源，当webpack 处理应用程序时,它会在内部构建一个依赖图,依赖图对应映射到项目所需的每个模块 ，并生成一个或多个 bundle
解决问题：
1️⃣编译代码能力，提高效率，解决浏览器兼容问题
2️⃣模块整合能力，提高性能，可维护性，解决浏览器频繁请求文件的问题
3️⃣模块能力,项目维护性增强,支持不同种类的前端模块类型,统一的模块化方案,所有资源文件的加载都可以通过代码控制

2.说说webpack的热更新是如何做到的？原理是什么？

模块热更新指在应用程序运行过程中，替换、添加、删除模块、而无需重新刷新整个应用。
webpack中配置开启热模块

更改之后css可以直接更新，js需要额外操作指定模块来热更新

原理总结：
通过webpack-dev-server创建两个服务器: 提供静态资源的服务express和Socket服务
express server 负责直接提供静态资源的服务(打包后的资源直接被浏览器请求和解析)
socket server 是一个 websocket 的长连接双方可以通信当socket server 监听到对应的模块发生变化时，会生成两个文件.json和.js文件
通过长连接socket server 可以直接将这两个文件主动发送给客户端(浏览器)
浏览器拿到两个新的文件后，通过HMR runtime机制,加载这两个文件，并且针对修改的模块进行更新

3.说说webpack的构建流程？

1️⃣初始化流程：
从配置文件和 Shell 语句中读取与合并参数,并初始化需要使用的插件和配置插件等执行环境所需要的参数：
2️⃣编译构建流程
从 Entry 发出,针对每个 Module 串行调用对应的 Loader 去翻译文件内容,再找到该 Module 依赖的 Module，递归地进行编译处理
3️⃣输出流程：
对编译后的 Module 组合成 Chunk,把 Chunk 转换成文件，输出到文件系统

4.说说webpack proxy工作原理？为什么能解决跨域？

webpack proxy基本行为就是接收客户端发送的请求后转发给其他服务器解决在开发模式下跨域问题。通过webpack-dev-server来实现代理服务，将自动编译和自动刷新浏览器等集成在一起。webpack配置deServer属性里的proxy实现代理。

工作原理：
proxy 工作原理是利用 http-proxy-middleware 这个http 代理中间件,实现请求转发给其他服器。
解决跨域：在开发阶段, webpack-dev-server 会启动一个本地开发服务器，而后端服务又是运行在另外一个地址上所以在开发阶段中，由于浏览器同源策略的原因,当本地访问后端就会出现跨域请求的问题，通过设置 webpack proxy 实现代理请求后,在代理服务器传递数据给本地浏览器的过程中，两者同源，并不存在跨域行为，浏览器就能正常接收数据。
注意：服务器与服务器之间请求数据并不会存在跨域行为，跨域行为是浏览器安全策略限制。

5.说说webpack中常见的loader？解决了什么问题？

loader用于对模块的源代码进行转换，在import或加载模块时预处理文件。
webpack分析各个模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。

6.说说webpack中常见的plugin？解决了什么问题？

htmlWepackPlugin
打包后自动生成一个html文文件，并把打包生成的js模块引入到该html中
clean-webpack-plugin
删除构建目录
mini-css-extract-plugin
提取css到一个单独的文件中

7.说说loader和Plugin的区别？

区别:
loader 是文件加载器,能够加载资源文件,并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中
plugin 赋予了 webpack 各种灵活的功能，例如打包优化、资源管理、环境变量注入等，目的是解决loader 无法实现的其他事

8.如何提高webpack的构建速度？

优化loader 配置
合理使用resolve.extensions
优化 resolve.modules
优化resolve.alias
使用 DLLPlugin 插件
使用 cache-loader
terser 启动多线程
合理使用sourceMap

9.如何借助webpack优化前端性能？

通过webpack 优化前端的手段有:
JS代码压缩
CSS代码压缩
Html文件代码压缩
文件大小压缩
图片压缩
Tree Shaking
代码分离
内联 chunk
分包
减少http请求次数

10.与webpack类似的工具还有哪些？区别？

Rollup
默认支持tree-shaking，代码效率更简洁效率更高
Parcel
跟webpack dev server一样也支持模块热替换，但用法更简单
Snowpack
会为应用程序每个文件构建一次，就可以永久缓存，文件更改时，snowpack会重新构建该单个文件
vite
直接启动开发服务器，不需要进行打包操作，也就是不需要分析模块的依赖，不需要编译，因此启动速度快

11.webpack的优势？

智能解析:对 CommonJS 、AMD、ES6 的语法做了兼容
万物模块:对 js、css、图片等资源文件都支持打包
开箱即用:HRM、Tree-shaking等功能
代码分割: 可以将代码切割成不同的 chunk,实现按需加载，降低了初始化时间
插件系统，具有强大的 Plugin 接口，具有更好的灵活性和扩展性
易于调试:支持SourceUrls 和SourceMaps。
快速运行:webpack 使用异步10 并具有多级缓存，这使得 webpack 很快且在增量编译上更加快
生态环境好:社区更丰富,出现的问题更容易解决