React项目Webpack始终生成单个大Chunk问题求助

在React项目中尝试了多种Webpack配置，但始终仅生成一个大Chunk。尽管Webpack文档表明SplitChunksPlugin的默认配置已经完善，但这个问题仍未解决。

Webpack相关版本 #

"webpack": "5.78.0",
"webpack-bundle-analyzer": "^4.8.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.13.2"

Webpack配置代码 #

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const WebpackManifestPlugin = require('webpack-manifest-plugin').WebpackManifestPlugin
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const dotenv = require('dotenv')

const env = dotenv.config().parsed
const isProdBuild = ['staging', 'production'].indexOf(env.NODE_ENV) > -1

const postcssLoaderConfig = {
  postcssOptions: {
plugins: [
  ['postcss-preset-env'],
  ['autoprefixer']
]
  }
}

const plugins = [
  /*new webpack.EnvironmentPlugin([
  'CLOUDINARY_BUCKET',
  'AUTH0_CLIENT_ID',
  'AUTH0_DOMAIN',
  ]),
  new MiniCssExtractPlugin({
filename: 'styles/[name]-[contenthash].css'
  }),*/
  /*new HtmlWebpackPlugin({
chunks: ['app'],
base: '/admin',
filename: 'index-admin.html',
hash: true,
minify: isProdBuild ? {
  removeComments: true,
  collapseWhitespace: true,
  removeRedundantAttributes: true,
  useShortDoctype: true,
  removeEmptyAttributes: true,
  removeStyleLinkTypeAttributes: true,
  keepClosingSlash: true,
  minifyJS: true,
  minifyCSS: true,
  minifyURLs: true
} : {}
  }),*/
  /*new CopyWebpackPlugin({
patterns: [
  {
    from: path.resolve(__dirname, '../assets/images'),
    to: 'images',
    globOptions: {
      ignore: ['**!/.gitkeep']
    }
  },
  { from: path.resolve(__dirname, '../assets/favicon.png') },
  { from: path.resolve(__dirname, '../assets/favicon.ico') }
]
  }),
  new WebpackManifestPlugin(),*/
]

if (!isProdBuild) {
  plugins.push(new BundleAnalyzerPlugin())
}

module.exports = {
  entry: {
main:  path.resolve(__dirname, '../assets/js/app/index.jsx'),
  },
  output: {
path: path.resolve(__dirname, '../public/assets'),
filename: 'js/[name]-[contenthash].js',
publicPath: '/'
  },
  module: {
rules: [
  {
    test: /\.css$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader'
      }
    ]
  },
  {
    test: /\.(js|jsx)$/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
          '@babel/preset-env',
          ['@babel/preset-react', {'runtime': 'automatic'}]
        ]
      }
    },
    exclude: /(node_modules\/(?!(screenfull)\/))|(assssets\/js\/).*/,
  },
  {
    test: /\.scss$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader'
      },
      {
        loader: 'postcss-loader',
        options: postcssLoaderConfig
      },
      {
        loader: 'fast-sass-loader'
      }
    ]
  },
  {
    test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
    use: {
      loader: 'file-loader',
      options: {
        name: 'fonts/[name].[ext]'
      }
    }
  },
  {
    test: /\.(png|jpg|gif|svg)$/,
    type: 'asset/resource'
  }
]
  },
  resolve: {
extensions: ['', '.js', '.jsx'],
  },
  plugins
}

内容的提问来源于stack exchange，提问作者Rantiev