Css extracted by mini-css-extract-plugin cannot be directly introduced by link.

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
        }
      },
    }
 

configure publicPath at new MiniCssExtractPlugin

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b30bca-2bd47.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b30bca-2bd47.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?