面试题：Webpack多入口多出口动态配置中的代码分割与公共模块提取

Question

在一个具有多个入口（例如 `src/home.js`、`src/about.js`、`src/contact.js`）的Webpack项目中，存在一些公共模块（如 `src/utils.js`）。要求实现多入口多出口的动态配置，并且将公共模块提取出来单独打包，同时优化各个入口生成的文件大小，避免重复代码。请详细说明Webpack配置思路及核心配置代码。

Answer 1

Webpack配置思路

1. 多入口配置：使用 entry 配置项，以对象形式指定多个入口文件。
2. 多出口配置：通过 output 配置项中的 filename 和 chunkFilename 根据入口动态生成输出文件。
3. 公共模块提取：使用 splitChunks 插件将公共模块提取出来单独打包。
4. 优化文件大小：通过 minimize 开启压缩，使用 terser-webpack-plugin 等插件优化代码，去除重复代码。

核心配置代码

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // 多入口配置
  entry: {
    home: './src/home.js',
    about: './src/about.js',
    contact: './src/contact.js'
  },
  output: {
    // 多出口配置
    filename: '[name].[chunkhash].js',
    chunkFilename: '[id].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    // 开启代码压缩
    minimize: true,
    minimizer: [
      new TerserPlugin()
    ],
    // 公共模块提取
    splitChunks: {
      chunks: 'all',
      name:'vendors'
    }
  }
};