Question

mini-css-extract-plugin将多个css chunk合并成一个css文件出问题

webpack装的mini-css-extract-plugin将多个css chunk合并成一个css文件出问题。github上查到答案，但是仍然无效：
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",
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
}
}

是想把css都提取出来放到main.css中。name: 'styles',这里改成main也不行。最后只能用回extract-text-webpack-plugin 其实就想实现类似extract-text-webpack-plugin中的allChunks:true功能。
plugins:[
new ExtractTextPlugin({
filename:'main.css',//重命名提取后的css文件
allChunks: true //有了chunk，需要在此配置
}),
]

有大佬知道我这问题出在哪儿吗？

Answer 1

文档里明确给出了输出到1个文件的配置示例

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",
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  }
}

你的写法和示例几乎完全一样。问题在于你要改文件名时造成的问题。你修改了cacheGroup的name，那个name其实是cacheGroup的ID，和CSS没关系。所以你要修改的是plugins下的filename

  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css", // 这里修改成filename: "main.css"
    })
  ],

追问

这里其实我也改了，但还是不行。。现在已经换用，extract-text-webpack-plugin了。但是mini-css-extract-plugin注释还在。能帮忙看下吗。 代码太长不让发。 放runjs上了。view-source:https://sandbox.runjs.cn/show/qs0vwgep

追答

const MiniCssExtractPlugin = require( "mini-css-extract-plugin" );
const VueLoaderPlugin      = require( "vue-loader/lib/plugin" );

module.exports = {
  mode : "production",
  module : {
    rules : [
      {
        resource : {
          test : /\.css$/
        },
        use : [
          {
            loader : MiniCssExtractPlugin.loader
          },
          {
            loader : "css-loader"
          }
        ]
      },
      {
        resource : {
          test : /\.vue$/
        },
        use : [
          {
            loader : "vue-loader"
          }
        ]
      }
    ]
  },
  output : {
    publicPath : "/dist/"
  },
  plugins : [
    new MiniCssExtractPlugin,
    new VueLoaderPlugin
  ]
};

如果还有问题，请说明详细的使用过程。

追问

我的webpack.config这么配置的额。复制所有内容地址栏打开，或者直接打开链接查看源代码view-source:https://sandbox.runjs.cn/show/qs0vwgep

追答

你给的链接地址没变呀。

Answer 2

我也有此困惑，怎么解决的