mini-css-extract-plugin将多个css chunk合并成一个css文件出问题
文档中展示了一个配置实例,用于将CSS输出到一个单独的文件中。以下是配置示例:
javascript const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = { optimization: { splitChunks: { cacheGroups: { styles: { name: 'styles', test: /\.css$/, chunks: 'all', enforce: true } } }, }, plugins: [ new MiniCssExtractPlugin({ filename: "[name].css" // 修改这里为所需的文件名,例如 "main.css" }), ], module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader" ] } ] } };
问题在于,当您尝试更改输出文件名时,可能会误修改了cacheGroup的name属性。
实际上,name属性是cacheGroup的ID,与CSS输出文件名无关。
因此,您需要修改的是plugins配置中的filename属性,以确保CSS被正确地输出到指定的文件中。