知识点

1. 基本概念：如入口（entry）、出口（output）、Loader、Plugin、模式（mode）等。
2. 配置文件：理解Webpack配置文件（通常是webpack.config.js）的结构和常用配置项，如entry、output、module、resolve、plugins等。
3. 模块打包：理解Webpack的模块打包机制，如通过import语句引入模块，支持CommonJS、AMD、ES6模块等不同类型的模块系统。
4. Loader：熟悉Loader的概念和使用方法，知道如何使用各种Loader处理不同类型的资源文件，如JavaScript、CSS、图片、字体等。
5. Plugin：了解Plugin的作用和使用方法，掌握常用的插件，如HtmlWebpackPlugin、MiniCssExtractPlugin等。
6. 代码分割：了解代码分割的概念和优势，掌握Webpack实现代码分割的方法，如动态导入（Dynamic Import）和使用splitChunks进行公共模块提取。
7. 懒加载和预加载：了解懒加载和预加载的概念，掌握在Webpack中如何实现懒加载和预加载，提升应用性能。
8. 环境配置：了解如何针对不同的环境（开发/生产）进行Webpack配置，如使用不同的配置文件或配置选项。
9. WebpackDevServer：熟悉WebpackDevServer的使用，了解其提供的开发服务器功能和常用配置。
10. 性能优化：了解Webpack的性能优化技巧，如代码拆分、Tree Shaking、缓存优化等，以及如何通过配置Webpack来提升构建速度和减小输出文件体积。

面试题

基本概念

什么是Webpack？它的作用是什么？

Webpack 是一个现代化的 JavaScript 应用程序静态模块打包工具。它主要用于将前端应用程序中的多个模块、文件和资源进行打包，以便在浏览器中加载和运行。

Webpack 的主要作用包括：

1. 模块打包：Webpack 可以将项目中的多个模块（如 JavaScript、CSS、图片等）进行打包，并将它们转换为浏览器可以理解和加载的格式。通过模块打包，可以将代码划分为更小的模块单元，提高代码的可维护性和重用性。
2. 依赖管理：Webpack 可以根据模块之间的依赖关系，自动解析和处理模块之间的依赖关系。这样可以减少手动管理依赖的复杂性，并确保每个模块的正确加载顺序。
3. 代码转换和优化：Webpack 可以通过使用各种加载器（Loaders）对代码进行转换和优化，例如使用 Babel 进行 ES6+ 转译、压缩代码、处理 LESS/Sass 等预处理器等。这样可以改善代码的兼容性、性能和体积。
4. 开发环境支持：Webpack 提供了开发环境支持，包括热更新（Hot Module Replacement）、源映射（Source Maps）、代码分离等功能，极大地提升了开发体验和效率。
5. 生态系统丰富：Webpack 拥有庞大的生态系统，提供了各种插件（Plugins）、加载器（Loaders）和工具，可以满足不同项目的需求，并与其他工具和框架无缝集成。

Webpack的编译过程？

• 初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler
• 编译：从 Entry 出发，针对每个 Module 串行调用对应的 Loader 去翻译文件的内容，再找到该 Module 依赖的 Module，递归地进行编译处理
• 输出：将编译后的 Module 组合成 Chunk，将 Chunk 转换成文件，输出到文件系统中

Webpack中有哪些核心概念？

1. 入口（Entry）：指定 Webpack 应该从哪个模块开始构建依赖图。通常情况下，一个应用程序会有一个或多个入口模块。
2. 输出（Output）：指定 Webpack 构建后的文件输出路径和文件名。输出可以是一个或多个文件，具体取决于配置。
3. 加载器（Loaders）：Webpack 使用加载器来处理各种类型的文件，并将其转换为有效的模块，以便在应用程序中引用。例如，使用 Babel 加载器将 ES6+ 代码转译为浏览器可识别的 ES5 代码。
4. 插件（Plugins）：插件是用于执行更广泛任务的功能模块。它们可以用于优化打包结果、资源管理、环境变量注入等。Webpack 提供了许多内置的插件，同时也支持第三方插件。
5. 模式（Mode）：根据开发环境，可以将 Webpack 配置为不同的模式，例如 development、production 和 none。不同的模式会触发不同的默认设置和优化策略。
6. 代码分离（Code Splitting）：Webpack 支持将应用程序拆分为多个独立的文件，以优化加载时间和资源利用率。代码分离可以通过入口配置、动态导入或使用插件来实现。
7. 解析（Resolve）：Webpack 会根据模块之间的引用关系解析模块的路径。通过配置解析规则，可以指定如何查找和处理不同类型的模块。
8. 开发服务器（DevServer）：Webpack DevServer 是一个基于 Express 的开发服务器，在开发过程中提供热更新、自动刷新页面等功能，以提高开发效率。

webpack的mode是什么

mode 是一个用于指定构建模式的选项。它可以设置为 “development”、”production” 或 “none”。

• development 模式：该模式被设计用于开发环境，并提供了一些针对开发过程的优化特性。例如，通过启用更详细的错误日志、保留原始代码等功能，使得构建后的代码更易于调试和理解。
• production 模式：该模式被设计用于生产环境，并针对输出的文件进行了优化。在这个模式下，Webpack会执行各种优化策略，包括代码压缩、作用域提升（scope hoisting）、Tree Shaking、去除注释等，以减小输出文件的体积并提高加载性能。
• none 模式：该模式关闭任何默认优化选项，只会执行基本的打包功能，不做任何额外处理。

source map是什么？生产环境怎么用？

source map 是将编译、打包、压缩后的代码映射回源代码的过程。打包压缩后的代码不具备良好的可读性，想要调试源码就需要 soucre map。
map文件只要不打开开发者工具，浏览器是不会加载的。
线上环境一般有三种处理方案：

• hidden-source-map：借助第三方错误监控平台 Sentry 使用
• nosources-source-map：只会显示具体行数以及查看源代码的错误栈。安全性比 sourcemap 高
• sourcemap：通过 nginx 设置将 .map 文件只对白名单开放(公司内网)

说一下 Webpack 的热更新原理吧

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

HMR的核心就是客户端从服务端拉去更新后的文件，准确的说是 chunk diff (chunk 需要更新的部分)，实际上 WDS 与浏览器之间维护了一个 Websocket，当本地资源发生变化时，WDS 会向浏览器推送更新，并带上构建时的 hash，让客户端与上一次资源进行对比。客户端对比出差异后会向 WDS 发起 Ajax 请求来获取更改内容(文件列表、hash)，这样客户端就可以再借助这些信息继续向 WDS 发起 jsonp 请求获取该chunk的增量更新。

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

配置文件

如何配置Webpack的入口和出口文件？

// webpack.config.js
module.exports = {
  entry: {
    main: './src/index.js',
    other: './src/other.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

文件指纹是什么？怎么用？

文件指纹是打包后输出的文件名的后缀。

• Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的 hash 值就会更改
• Chunkhash：和 Webpack 打包的 chunk 有关，不同的 entry 会生出不同的 chunkhash
• Contenthash：根据文件内容来定义 hash，文件内容不变，则 contenthash 不变

loader和plugin

loader和plugin有什么区别

1. Loader（加载器）：处理模块文件的加载和转换

   • Loader 用于处理非 JavaScript 类型的模块文件，例如处理 CSS、图片、字体等资源文件。它们可以将这些文件转换为模块，以便在 JavaScript 中引入和使用。
   • Loader 在 Webpack 的配置中通过模块规则（module rule）来定义和使用。每个 Loader 配置都包含一个规则匹配条件和一个或多个要应用的 Loader。
   • 例如，可以使用 css-loader 来加载和处理 CSS 文件，使用 file-loader 来处理图片文件。

2. Plugin（插件）：扩展和定制 Webpack 的构建过程

   • Plugin 用于执行更广泛的任务，例如优化打包结果、资源管理、环境变量注入等。它们是基于事件机制工作的，在整个构建过程中可以介入并实施自定义逻辑。
   • Plugin 可以对 Webpack 的编译过程进行扩展和定制，以满足项目的特定需求。它们可以添加额外的功能和功能，使构建过程更加灵活和强大。
   • 例如，可以使用 HtmlWebpackPlugin 插件在构建过程中动态生成 HTML 文件，使用 MiniCssExtractPlugin 插件提取 CSS 代码到单独的文件。

有哪些常见的Loader？你用过哪些Loader？

1. babel-loader：用于将 ES6+ 代码转译为浏览器可识别的 ES5 代码。
2. css-loader：用于处理 CSS 文件，使其能够被 JavaScript 引入并在应用程序中使用。
3. style-loader：将 CSS 代码通过动态创建 <style> 标签的方式插入到 HTML 页面中，并使其生效。
4. file-loader：用于加载处理各种文件（如图片、字体等），并将这些文件复制到输出目录。
5. url-loader：类似于 file-loader，但可以根据文件大小将小型文件转换为 Data URL，以减少额外的网络请求。
6. sass-loader：用于处理 Sass 预处理器语法，并将其转换为普通的 CSS 代码。
7. less-loader：用于处理 Less 预处理器语法，并将其转换为普通的 CSS 代码。
8. postcss-loader：用于后处理 CSS，可以进行自动添加浏览器前缀、压缩等操作。
9. eslint-loader：集成 ESLint 检查，在构建过程中进行代码规范检查。
10. ts-loader：用于处理 TypeScript 代码，将其转换为 JavaScript 代码。
11. csv-loader：用于加载处理 CSV 文件。
12. xml-loader：用于加载处理 XML 文件。
13. json-loader：用于加载处理 JSON 文件。
14. html-loader：用于加载处理 HTML 文件，并将其作为字符串导出。
15. markdown-loader：用于加载处理 Markdown 文件。
16. vue-loader：用于加载处理 Vue 单文件组件（.vue）。
17. eslint-loader：用于在构建过程中进行 JavaScript 代码的静态检查和规范性校验。

有哪些常见的Plugin？你用过哪些Plugin？

1. HtmlWebpackPlugin：用于自动生成HTML文件，并将打包后的资源（如脚本、样式）自动注入到HTML中。
2. MiniCssExtractPlugin：用于将CSS提取为单独的文件，而不是将其内联到HTML中的 <style> 标签中。
3. CleanWebpackPlugin：用于在每次构建之前清理输出目录，确保只保留最新的构建结果。
4. DefinePlugin：用于定义全局常量，在编译时可以在代码中使用，例如配置环境变量。
5. HotModuleReplacementPlugin：用于实现热模块替换（Hot Module Replacement），使得在开发过程中可以无需刷新页面即可更新模块。
6. CopyWebpackPlugin：用于将静态文件或目录复制到输出目录中，例如将图片或字体等静态资源复制到打包后的文件夹。
7. ProvidePlugin：用于自动加载模块，从而避免手动导入这些模块。
8. UglifyJsPlugin（Webpack 4之前的版本）/ TerserPlugin（Webpack 4及更高版本）：用于压缩和混淆JavaScript代码，减小输出文件的体积。
9. OptimizeCSSAssetsPlugin：用于优化和压缩CSS文件。
10. BundleAnalyzerPlugin：用于分析打包后的文件体积和依赖关系，以帮助优化构建结果。

代码分割

代码分割（Code Splitting）是一种将应用程序打包成更小的块（chunks）的技术，以便在需要时按需加载。它有助于减少初始加载时间，提高应用程序的性能。

什么是代码分割（Code Splitting）？如何在Webpack中实现代码分割？

有多种方式可以实现代码分割：

1. 入口起点配置：

通过配置多个入口起点，可以将应用程序的不同部分分别打包为独立的代码块。这样，在访问不同页面或执行不同操作时，可以按需加载相应的代码块。

// webpack.config.js
module.exports = {
  entry: {
    main: './src/main.js',
    vendor: './src/vendor.js',
  },
};

在上述配置中，main 和 vendor 分别作为入口起点，将生成两个独立的代码块。

2. 动态导入（Dynamic Import）：

使用动态导入语法，可以将模块作为独立的代码块按需加载。这种方式使得模块在需要时才会被下载和执行。

// main.js
import('./moduleA').then(module => {
  // 使用 moduleA
});

在上述示例中，moduleA 将作为一个独立的代码块进行按需加载。

3. SplitChunks 插件：

Webpack 提供了 SplitChunksPlugin 插件，用于自动拆分公共模块并创建独立的代码块。这样可以避免重复加载和提高缓存利用率。

// webpack.config.js
module.exports = {
  // ...其他配置项

  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

性能优化

Webpack摇树的原理

Webpack的Tree Shaking（摇树）是一种用于优化代码的技术，它通过静态分析和依赖关系来消除未使用的代码，从而减小打包后的文件体积。

摇树的原理如下：

1. 代码静态分析：Webpack会对项目中的所有模块进行静态分析。它会遍历模块的依赖关系图，并识别出每个模块导出的变量和函数。
2. 标记引用关系：Webpack会标记每个模块内部被其他模块引用的变量和函数。
3. 消除未使用的代码：在生成最终的打包文件时，Webpack根据标记的引用关系，将没有被引用的变量和函数从打包文件中剔除。这样可以大大减小最终的文件体积。

如何优化 Webpack 的构建速度？

1. 升级Webpack版本：

2. 多线程/多实例构建：webpack-parallel-uglify-plugin

3. 按需打包：使用exclude或include来配置相应的路径或文件

4. 充分利用缓存：hard-source-webpack-plugin

5. 使用DLL：DLL将第三方依赖库等稳定的模块单独打包成DLL文件，不参与每次的构建，可以提高打包速度。webpack.DllPlugin

6. 配置resolve.modules配置项：指定Webpack查找模块的路径，可以缩短Webpack查找模块的时间

7. 使用Tree Shaking：去除无用代码，可以减少打包体积和提高打包速度。optimization.minimize

8. 压缩代码：terser-webpack-plugin