面试题：Webpack多入口与多出口在大型项目中的基础配置

1. 多入口与多出口基础配置思路

在Webpack中，配置多入口和多出口主要通过entry和output字段来实现。entry字段可以是一个对象，每个键值对表示一个入口点，键为入口名称，值为入口文件路径。output字段的filename使用占位符[name]来对应不同入口生成不同的输出文件名，chunkFilename同理用于非入口chunk的文件名。

2. Webpack配置代码片段

const path = require('path');

module.exports = {
  // 多入口配置
  entry: {
    index: './src/index.js',
    about: './src/about.js'
  },
  output: {
    // 输出路径
    path: path.resolve(__dirname, 'dist'),
    // 入口chunk输出文件名
    filename: '[name].[contenthash].js',
    // 非入口chunk输出文件名
    chunkFilename: '[name].[contenthash].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

3. 说明

entry对象定义了两个入口index和about，分别对应./src/index.js和./src/about.js文件。
output.path指定了输出目录为dist。
output.filename使用[name]占位符，会根据入口名称生成对应的输出文件名，[contenthash]用于缓存控制，根据文件内容生成哈希值。
module.rules配置了CSS文件的处理规则，使用style-loader和css-loader来处理CSS文件。同时，对于CSS文件的输出，Webpack会通过style-loader将CSS插入到HTML页面中。如果想要将CSS单独提取出来，可以使用mini - css - extract - plugin插件。例如：

const MiniCssExtractPlugin = require('mini - css - extract - plugin');

module.exports = {
  entry: {
    index: './src/index.js',
    about: './src/about.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    })
  ]
};

这样就会将CSS单独提取到以入口名称命名的CSS文件中。

面试题：Webpack多入口与多出口在大型项目中的基础配置

知识考点

面试题答案

1. 多入口与多出口基础配置思路

2. Webpack配置代码片段

3. 说明