面试题：Webpack中entry的多入口配置及应用场景

1. Webpack 多入口文件的 entry 配置方式

在 Webpack 中配置多个入口文件，可以将 entry 设置为一个对象，对象的键是入口文件的名称，值是入口文件的路径。例如：

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

在上述配置中，main 和 vendor 是两个入口文件的名称，./src/main.js 和 ./src/vendor.js 分别是对应的入口文件路径。[name] 是 Webpack 的占位符，在生成输出文件时会被替换为对应的入口文件名称，即 main.bundle.js 和 vendor.bundle.js。

2. 多入口配置在实际项目中的应用场景

大型单页应用（SPA）：在大型 SPA 项目中，可能有不同的功能模块需要独立加载和初始化。例如，一个电商网站的首页、商品详情页、购物车等模块，每个模块都有自己的 JavaScript 逻辑和依赖。通过多入口配置，可以将每个模块的代码分别打包，实现按需加载，提高页面加载性能。比如，首页模块可能只需要加载与首页展示相关的代码，而购物车模块加载与购物车操作相关的代码，互不干扰，且在用户访问相应页面时才加载对应的代码。
多页面应用（MPA）：对于 MPA 项目，每个页面都有自己独立的 HTML 和 JavaScript 文件。例如，一个企业官网可能有首页、关于我们、产品介绍、联系我们等多个页面。每个页面的 JavaScript 代码可能有不同的入口，通过多入口配置可以分别打包每个页面的 JavaScript，并且可以为每个页面定制特定的代码结构和依赖关系。例如，首页可能需要加载轮播图、最新消息等相关脚本，而产品介绍页面可能需要加载产品详情展示、规格选择等相关脚本，通过多入口配置能更好地管理和优化每个页面的资源加载。
分离公共代码：项目中可能存在一些公共的代码库或工具函数，如 jQuery、lodash 等。可以将这些公共代码单独作为一个入口进行打包，生成一个 vendor bundle。其他业务逻辑的入口文件在打包时可以避免重复打包这些公共代码，通过在 HTML 中引入 vendor bundle 和业务逻辑 bundle，利用浏览器缓存机制，当公共代码不变时，浏览器可以直接从缓存中加载，提高页面加载速度。例如，多个页面都依赖 jQuery 进行 DOM 操作，将 jQuery 作为一个独立的入口打包成 vendor.js，各个页面的入口文件只打包各自的业务逻辑，这样在部署后，只要 vendor.js 未改变，浏览器就无需重新下载，提升了用户体验。

面试题：Webpack中entry的多入口配置及应用场景

知识考点

面试题答案

1. Webpack 多入口文件的 entry 配置方式

2. 多入口配置在实际项目中的应用场景