面试题：Webpack多入口与多出口配置基础及简单案例

Question

在一个中等规模的前端项目中，假设需要打包两个独立的页面，分别是index页面和about页面，每个页面有各自的js和css文件。请描述如何使用Webpack进行多入口与多出口配置，并简单说明相关配置项的作用。

Answer 1

1. Webpack 多入口与多出口配置步骤：
   • 创建项目结构：假设项目结构如下：

     project/
       ├── src/
       │   ├── index/
       │   │   ├── index.js
       │   │   └── index.css
       │   └── about/
       │       ├── about.js
       │       └── about.css
       ├── dist/
       └── webpack.config.js
     

   • 配置 webpack.config.js：

     const path = require('path');
     
     module.exports = {
       entry: {
         index: path.resolve(__dirname,'src/index/index.js'),
         about: path.resolve(__dirname,'src/about/about.js')
       },
       output: {
         path: path.resolve(__dirname, 'dist'),
         filename: '[name].[contenthash].js'
       },
       module: {
         rules: [
           {
             test: /\.css$/,
             use: ['style - loader', 'css - loader']
           }
         ]
       },
       plugins: [],
       optimization: {
         splitChunks: {
           chunks: 'all'
         }
       }
     };
     

2. 相关配置项作用：
   • entry：
     • 定义入口点。这里 entry 是一个对象，键（index 和 about）代表入口名称，值是入口文件的路径。每个入口文件会作为一个独立的构建起点，Webpack 会从这里开始递归地构建依赖图。
   • output：
     • path：指定输出目录，path.resolve(__dirname, 'dist') 表示将打包后的文件输出到项目根目录下的 dist 文件夹。
     • filename：定义输出文件的名称。[name] 是占位符，会被替换为入口名称（index 或 about），[contenthash] 也是占位符，根据文件内容生成哈希值，用于缓存控制，文件内容改变时哈希值改变，浏览器会重新加载文件。
   • module.rules：
     • test：用于匹配文件路径，这里 /\.css$/ 表示匹配所有 .css 文件。
     • use：指定处理匹配文件的加载器。style - loader 会将 CSS 插入到 DOM 中，css - loader 用于解析 CSS 文件中的 @import 和 url() 等语句。
   • optimization.splitChunks：
     • chunks: 'all'：告诉 Webpack 将所有类型的 chunks（initial、async 和 all）进行代码分割。这样可以提取多个入口之间的公共代码，避免重复打包，提高加载性能。