【前端面试】—— webpack（一）

说说 webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

能力：

1. 代码编译：能够将最新的 es 特性向下编译至 ES6、ES5 等版本，解决浏览器兼容问题；
   
2. 模块整合：（可控打包，懒加载）将多个 js 文件按需打包成一个或数量更少的 bundle，解决浏览器频繁请求文件的问题；
   
3. 统一的模块方案：所有资源加载都可以通过代码控制

说说 webpack 构建流程

webpack 构建流程是一个将各插件串联的过程，在运行过程中会广播事件，插件只需监听它所关心的事件，就能加入这条 webpack 机制中，去改变 webpack 的运作。

主要有三大步骤：

1. 初始化：读取与合并配置参数；加载 Plugin；实例化 Compiler
2. 编译：（调用 Compiler 的 run）从 entry 出发，调用所有配置的 loader 对 module 进行翻译，再递归编译该 module 依赖的 module，最后将编译后的 module 组合成 chunk 及对应资源 assets
3. 输出：把编译得到的 assets 输出到文件系统

说说 webpack 中的 loader

（loader）概念：对模块的源代码进行转换，让 webpack 能够去处理其他类型的文件。

特性：链式调用，每个 loader 会处理之前已经处理过的资源。执行顺序为相反顺序，同一任务的 loader 可以同时挂载多个 —— “从右到左，从下往上”。

常见的 loader：

• css-loader：允许将 css 文件通过 require 的方式引入，并返回 css 代码
• style-loader：将 css-loader 生成的内容用 style 标签挂载到页面的 head 中
• less-loader：处理 less
• file-loader：将文件上的 import/require 解析为 url，并将该文件发送到输出目录
• url-loader：支持 file-loader 所有功能，还能根据文件体积选择是否返回 base64 编码
• row-loader：将文件导入为字符串

webpack 5 使用资源模块类型（asset module type）替换最后三个 loader

• asset/resource：发送一个单独的文件并导出 URL
• asset/inline：导出一个资源的 data URI
• asset/source：导出资源的源代码

说说 webpack 中的 plugin

（plugin）概念：遵循一定规范的计算机应用程序，和主应用程序相交互，提供特定的功能。webpack 的 plugin 比较于 loader，可以执行更广泛的任务，包括打包优化，资源管理，环境变量注入，它们会运行在 webpack 的不同阶段，贯穿 webpack 整个编译周期。

特性：本质上是一个具有 apply 方法的 JavaScript 对象

常见的 plugin：

• HtmlWebpackPlugin：打包结束后自动生成一个 html 文件，并把打包生成的 js 模块引入到该 html 中
• mini-css-extract-plugin：将 css 单独打包成一个文件
• clean-webpack-plugin：清理构建目录（webpack 5.20.0+ 可以使用 output.clean=true）
• webpack-dev-server：使用 webpack 提供的具有实时重载功能的开发服务器
• DefinePlugin：允许在编译时将代码中的变量替换为其他值或表达式
• ProvidePlugin：自动加载模型而不必到处 import 或 require 它们

说说 loader 和 plugin 的区别

功能上

• loader 是文件加载器，能够加载资源文件并翻译成 webpack 能够理解的模块
• plugin 赋予了 webpack 各种灵活的功能，比如打包优化、资源管理、环境变量注入

运行时机上

• loader 运行在打包文件之前
• plugin 在整个编译周期都起作用。在 webpack 运行生命周期中会广播出许多事件，plugin 可以监听这些事件，在合适时机通过 webpack 提供的 API 改变输出结果

说说热模块更新

HMR（Hot Module Replacement），指在应用程序运行过程中，替换、添加、删除模块无需重新刷新整个应用，只将修改的模块替换到应用中。

如何借助 webpack 优化前端性能

• 代码压缩
  • HTML html-webpack-plugin
  • CSS css-minimizer-webpack-plugin
  • JS tensor-webpack-plugin
• 文件压缩 compression-webpack-plugin
• 图片压缩 image-webpack-loader
• Tree Shaking
  • usedExports：通过标记某些函数是否被使用，之后通过 Tensor 来进行优化
  • sideEffects：跳过整个模块/文件，直接查看该文件是否有副作用
• 代码分离 splitChunks

说说 webpack proxy

概念：webpack 提供的代理服务，接收客户端发送的请求后转发给其他服务器，便于开发者在开发模式下解决跨域问题。