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