MiniCssExtractPlugin abstracts why css generates a js file with the same name, and introduces this js to bring in the extracted css link, whether there is a problem with the configuration or just like this.

 new HtmlWebpackPlugin({
    title: "GoldEgg",
    template: "./src/page/index/index.html",
    chunks: ["commons", "index", "styles"],
    filename: "index.html",
    favicon: ""
  })

plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].[hash:6].css",
      // chunkFilename: "css/[name].[hash:6].css",

    }),
    
  splitChunks: {
      chunks: "all",
      minSize: 1,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: true,
      cacheGroups: {
        commons: {
          name: "commons",
          chunks: "all",
          minChunks: 2,
          filename: "js/[name].[hash:6].js"
        },
        styles: {
          name: "styles",
          test: /\.(css|scss)$/,
          chunks: "all",
          enforce: true
        }
      },
    }