如何配置Webpack实现两个React SPA分别打包到app和config目录

原有配置存在以下核心问题：

• 入口命名使用了相对路径，导致生成的资源文件名异常
• 输出路径配置不合理，额外增加了dist目录中转，冗余的CopyWebpackPlugin逻辑无法正确同步资源
• HtmlWebpackPlugin未指定对应入口chunk，会将两个SPA的所有资源都注入到同一个HTML中
• CSS处理逻辑和MiniCssExtractPlugin配置不匹配，无法正确抽离CSS文件
• 公共资源路径配置错误，导致静态资源加载路径异常
• runtimeChunk设置为single会让两个独立SPA共用运行时文件，不符合多入口独立部署的要求

'use strict';

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

module.exports = {
  entry: {
    app: ['@babel/polyfill', `${process.cwd()}/src/app.index.js`],
    config: ['@babel/polyfill', `${process.cwd()}/src/config.index.js`]
  },
  output: {
    globalObject: 'this',
    path: process.cwd(),
    filename: '[name]/scripts/[name].[contenthash:8].js',
    chunkFilename: '[name]/scripts/[name].[contenthash:8].js',
    publicPath: './',
    clean: {
      keep: (asset) => !asset.startsWith('app/') && !asset.startsWith('config/')
    }
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx|test.js)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.(css|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name][contenthash:8].[ext]',
            outputPath: 'assets/img',
            esModule: false
          }
        }]
      },
      {
        test: /\.html$/,
        use: [{
          loader: 'html-loader'
        }]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name]/[name].[contenthash:8].css',
      chunkFilename: '[name]/[name].[contenthash:8].css'
    }),
    // app 入口对应HTML
    new HtmlWebPackPlugin({
      template: `${process.cwd()}/public/index.html`,
      filename: `${process.cwd()}/app/index.html`,
      chunks: ['app'],
      inject: 'body'
    }),
    // config 入口对应HTML
    new HtmlWebPackPlugin({
      template: `${process.cwd()}/public/iparams.html`,
      filename: `${process.cwd()}/config/iparams.html`,
      chunks: ['config'],
      inject: 'body'
    })
  ],
  optimization: {
    moduleIds: 'deterministic',
    runtimeChunk: 'multiple',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: -10,
          chunks: 'all'
        }
      }
    }
  }
};

• 调整入口命名为app和config，避免路径污染资源名称
• 输出路径直接指定为项目根目录，资源直接输出到对应./app和./config目录下，无需额外中转复制，移除了冗余的CopyWebpackPlugin和CleanWebpackPlugin（webpack5自带clean能力，配置规则避免删除非构建生成的文件）
• 给每个HtmlWebpackPlugin指定对应chunks，确保每个HTML只注入对应SPA的资源
• 替换style-loader为MiniCssExtractPlugin.loader，匹配CSS抽离配置，CSS文件直接输出到对应SPA目录
• 调整runtimeChunk为multiple，每个SPA生成独立的运行时文件，避免跨应用干扰
• 修正静态资源输出路径，确保资源加载路径正确

内容的提问来源于stack exchange，提问作者Pablo Alessandro Santos Hugen