面试题总结 —— webpack 面试真题

最新推荐文章于 2024-10-29 14:10:06 发布

zhangjiamei812

最新推荐文章于 2024-10-29 14:10:06 发布

阅读量72

点赞数

文章标签： webpack 面试前端

本文链接：https://blog.csdn.net/zhangjiamei812/article/details/133375474

版权

前端为何要进行打包和构建？

module chunk bunle 的区别？

loader 和 plugin 的区别？

常见的 loader 和 plugin 有哪些？

Babel 和 webpack 的区别？

webpack 如何产出一个 lib 库？

说一下 Babel-polyfill 和 babel-runtime 的区别？

Webpack 如何实现懒加载？

为何 Proxy 不能被 Polyfill？

Webpack 如何优化构建速度？

Webpack 如何优化产出代码？

前端为何要进行打包和构建？
- 模块化管理
- 资源优化
- 兼容性处理
- 代码分割和按需加载
- 缓存策略
- 自动化和拓展

前端进行打包和构建可以提高代码质量、优化资源加载、增强兼容性、加快页面加载速度，并带来开发效率的提升。

module chunk bunle 的区别？
- 模块（module）是代码的独立单元，可以是一个文件；代码块（chunk）是由相关联的模块组成的一段代码片段；而捆包（bundle）是最终生成的文件，包含所有的代码块和模块的代码。在打包和构建过程中，模块用于更好地组织和重用代码，代码块用于优化页面加载速度，而捆包则是最终生成的部署文件。
loader 和 plugin 的区别？
- Loader 主要用于对模块进行转换处理，将非 JavaScript 类型的文件转化为可处理的模块，而 Plugin 则用于扩展 Webpack 的功能，执行更广泛的任务，例如自动生成 HTML 文件、代码压缩、提取 CSS 等操作。Loader 和 Plugin 是 Webpack 实现灵活和强大的两个关键机制，它们在打包过程中各司其职，共同完成项目的构建和优化。
常见的 loader 和 plugin 有哪些？
- 常见的 Loader:
  - babel-loader：将 ES6+ 代码转换成 ES5 语法，使其能够在低版本浏览器中运行。
  - css-loader：解析 CSS 文件，并处理其中的依赖关系，例如导入其他 CSS 文件或图片。
  - style-loader：将解析后的 CSS 以 <style> 标签的形式插入到 HTML 中。
  - sass-loader：解析处理 SASS/SCSS 文件，将其转换为 CSS。
  - url-loader：将文件转换为 base64 编码的 URL，用于处理图片、字体等静态资源。
  - file-loader：将文件输出到指定目录，用于处理字体文件等静态资源。
- 常见的 Plugin：
  - HtmlWebpackPlugin：根据提供的模板生成 HTML 文件，并自动将打包后的资源文件引入到 HTML 中。
  - CleanWebpackPlugin：清理指定目录下的旧文件，用于在每次构建之前清理构建目录。
  - MiniCssExtractPlugin：将 CSS 提取为独立的文件，而不是以 <style> 标签的形式插入到 HTML 中。
  - DefinePlugin：定义全局常量，在代码中可以直接使用，例如定义环境变量。
  - UglifyJsPlugin：压缩 JavaScript 代码，减小文件体积。
  - CopyWebpackPlugin：复制文件或文件夹到输出目录，用于将静态资源复制到最终发布目录。
Babel 和 webpack 的区别？
- Babel 主要用于 JavaScript 代码的转译，将新版本的 JavaScript 语法转换为旧版本的语法，以提供更广泛的浏览器兼容性。
- Webpack 主要用于项目的打包和构建，可以处理各种资源文件，并提供了丰富的特性来优化项目结构和性能。
- Babel 是一个单独的工具，可以与其他构建工具或流程集成使用，而不仅限于与 Webpack 结合使用。
- Webpack 可以通过配置使用 Babel，将 Babel 作为其中一个 Loader，在打包过程中对 JavaScript 代码进行转译。

在实际开发中，通常会将 Babel 和 Webpack 结合使用，以便同时享受它们各自的优势，实现更高效、可维护的前端项目构建。

webpack 如何产出一个 lib 库？
1.创建项目：首先，创建一个新的项目文件夹，并在其中初始化一个新的 npm 项目。在命令行中执行以下命令：
```
mkdir my-lib
cd my-lib
npm init -y
```
2.安装依赖：接下来，安装 Webpack 和相关的 Loader 和 Plugin。在命令行中执行以下命令：
```
npm install webpack webpack-cli --save-dev
```
3.配置 Webpack：在项目根目录中创建一个名为 webpack.config.js 的配置文件，并进行如下配置：

4.创建入口文件：在项目根目录中创建一个入口文件，通常命名为 index.js，这将是你库的主要入口点。

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-lib.js',
    library: 'MyLib',
    libraryTarget: 'umd',
  },
};

上述配置中，设置了 entry 为入口文件路径，使用 path.resolve 指定输出目录，设置 filename 为输出文件名称。library 定义了库的名称，libraryTarget 定义了库的输出方式为 UMD。

5. 构建库：运行以下命令使用 Webpack 进行库的构建：

npx webpack --config webpack.config.js

执行完成后，将生成一个名为 my-lib.js 的文件，该文件就是构建后的库文件。

6.使用库：你可以在其他项目中使用构建后的库文件。通过引入和使用 my-lib.js 文件，即可使用你的自定义库提供的功能。

这样，你就成功地使用 Webpack 构建了一个库。当然，这只是一个基本的示例，你还可以通过配置文件来添加其他的 Loader 和 Plugin，以满足你的具体需求。

说一下 Babel-polyfill 和 babel-runtime 的区别？
- Babel-polyfill 主要用于在旧版本的 JavaScript 运行环境中提供 ECMAScript 标准库的兼容性，它会在全局环境中添加缺失的特性和 API。
- Babel-runtime 主要用于替换编译结果中的辅助函数，并通过模块化的方式引入 @babel/runtime 模块来实现代码的转译和兼容性，不会向全局环境引入额外的变量或方法。
- Babel-polyfill 提供更全面的兼容性，但会增加代码体积；而 Babel-runtime 则提供更精细的模块化转译，减小编译结果的体积。选择使用哪种工具取决于具体项目的需求和目标环境的兼容性要求。

Webpack 如何实现懒加载？

安装 Lazy Loading 相关的插件：webpack 提供了多个插件用于实现代码分割和懒加载，根据项目需求选择对应的插件进行安装。
```
npm install --save-dev @babel/plugin-syntax-dynamic-import
```
配置 Babel：由于动态导入语法 import() 不是标准的 ECMAScript 语法，需要使用 @babel/plugin-syntax-dynamic-import 插件进行支持。在 Babel 配置文件中添加如下配置：
```
{
  "plugins": [
    "@babel/plugin-syntax-dynamic-import"
  ]
}
```
在业务逻辑中使用动态导入：将需要延迟加载的模块通过动态导入的方式引入。在使用 ES6 模块化语法的环境中，可以使用 import() 函数来实现动态导入：

// Home 模块是需要延迟加载的模块
const loadHomeModule = () => import('./Home.js');
// ...
// 按需加载 Home 模块
loadHomeModule().then(module => {
  // 模块加载完成后执行相关操作
});

配置 Webpack：在 Webpack 配置文件中配置代码分割，将不同的 chunk 拆分成独立的文件。可以使用以下两种方式配置：

在应用程序的 webpack.config.js 文件中，添加 optimization.splitChunks 配置。

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'async', // 只对异步加载的模块进行代码分割
      minSize: 20000, // 模块最小体积，超过这个值才会被分割
      maxSize: 0, // 模块最大体积，为 0 表示没有限制
      minChunks: 1, // 被多少模块共享时才会被分割，为 1 表示只被一个模块使用时会被分割
      maxAsyncRequests: 30, // 最大异步请求数量，超过这个数量后不再分割代码块
      maxInitialRequests: 30, // 最大初次请求资源数量，超过这个数量后不再分割代码块
      automaticNameDelimiter: '~', // 文件名连接符号
      enforceSizeThreshold: 50000, // 强制执行拆分大小阈值。比如如果设为 30KB，则所有更小的文件都将会打包到一个大于30kb的文件内（不推荐）
      cacheGroups: {
        // 定义缓存组，将具有相同名称的模块放到一个缓存组中
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/, // 表示符合该正则表达式的 node_modules 模块会被打包到进入 defaultVendors 组中
          reuseExistingChunk: true,
          priority: -10, // 优先级，数字越大优先级越高
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

在具体的业务逻辑代码中，使用 magic comment 的方式指定需要分割成独立文件的 chunk 名称。

// Home 模块是需要延迟加载的模块
const loadHomeModule = () => import(/* webpackChunkName: "home" */ './Home.js');

通过以上步骤，就可以实现 Webpack 中的懒加载。当需要延迟加载的模块被引用时，Webpack 会自动将其打包成独立的 chunk，并使用浏览器原生支持的动态加载机制进行加载。

为何 Proxy 不能被 Polyfill？
- Proxy 是 ECMAScript 6 中引入的一种元编程特性，用于创建一个可以拦截并自定义操作的对象。它提供了一种对对象的动态代理，可以拦截对象的属性访问、赋值、删除等操作。
- Polyfill（填充）是指为了解决旧版本浏览器不支持某些新特性而引入的代码补丁。通过加载 Polyfill，我们可以在较旧的浏览器中使用一些新特性。
- 然而，Proxy 是一种非常强大和复杂的功能，依赖于一些底层 JavaScript 引擎的行为。与其他新特性（如 Promise、Array.from 等）不同，Proxy 不能被简单地用代码补丁的方式来实现。
- Proxy 特性需要 JavaScript 引擎在底层提供支持，这意味着只能在支持 Proxy 的现代浏览器或运行环境中使用。因此，无法通过 Polyfill 来模拟或兼容旧版本浏览器中缺少 Proxy 功能的情况。
  
  简而言之，Proxy 功能是 JavaScript 引擎原生提供的功能，并不能通过 Polyfill 来模拟或兼容旧版本浏览器中不支持 Proxy 的情况。如果需要在不支持 Proxy 的环境中运行，你可能需要考虑其他的替代方案或使用特性检测来处理不同环境下的兼容性问题。
Webpack 如何优化构建速度？
- 减少文件的数量
- 使用缓存
- 使用多线程/进程构建
- 减少Loader的使用
- 优化Babel配置
- 使用别名和模块解析优化
- 合理使用插件
- 及时清理无用资源
- 开启生产模式
- 使用 Webpack 的 bundle 分析工具（如 webpack-bundle-analyzer）来分析打包结果
Webpack 如何优化产出代码？
- 代码压缩
- 按需加载
- 优化图片
- Tree Shaking
- 代码分割
- 缓存策略
- Scope Hoisting
- 使用externals
- 优化配置
- 合理使用插件