webpack单独提取css做cacheGroups无效？

这个问题经过几天的研究，我已经解决了，我使用的方法是：“基于webpack打包入口提取CSS”，

这是我在官方文档中看到的一个办法。

以下是我的webpack代码：

const { defineConfig } = require("@vue/cli-service");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const htmlWebpackInjectAttributesPlugin = require("html-webpack-inject-attributes-plugin");
const path = require("path");
const HtmlWebpackExcludeAssetsPlugin = require("html-webpack-exclude-assets-plugin-webpack5");


const themeReg = /^(.*)((light|dark|default)\..+\.css)$/;
const themeRegJS = /^(.*)((light|dark|default).*\.js)$/;
const themeLinkJudge = (tagName, attributes) => {
  return (
    tagName === "link" && attributes.href && themeReg.test(attributes.href)
  );
};

module.exports = defineConfig({
  outputDir: "ThemeResearch",
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  chainWebpack: (config) => {

    // dev环境下vue使用的不是MiniCssExtractPlugin来提取css生成css文件，而是使用vue-style-loader来生成style标签，
    // 因为我们需要生成文件，所以这里即使dev环境下也使用MiniCssExtractPlugin
    config
      .plugin("MiniCssExtractPlugin")
      .use(MiniCssExtractPlugin, [
        {
          filename: () => {
            return "css/[name].[contenthash:8].css";
          },
          chunkFilename: () => {
            return "css/[name].[contenthash:8].css";
          },
        },
      ])
      .end();
    

      // 让normal这个module不去匹配我们的主题文件
    config.module
      .rule("scss")
      .oneOf("normal")
      .test(/^((?!light\.scss|dark\.scss|default\.scss).)*$/)
      .end();

      // 定义自己的module来使用我们自己的loader
    const theme = config.module
      .rule("scss")
      .oneOf("ownTheme")
      .test(/.*(light|dark|default)\.scss$/);

      // 清除vue-cli写好的loader,改用自己写的
    theme.uses.clear();

    theme
      .use(MiniCssExtractPlugin.loader)
      .loader(MiniCssExtractPlugin.loader)
      .end()
      .use("css-loader")
      .loader("css-loader")
      .end()
      .use("postcss-loader")
      .loader("postcss-loader")
      .end()
      .use("sass-loader")
      .loader("sass-loader")
      .end();


      // 增加自定义标签属性
    config
      .plugin("html")
      .tap((args) => {
        args[0].attributes = {
          'data-theme': function (tag) {
            const { attributes, tagName } = tag;
            if (themeLinkJudge(tagName, attributes)) {
              return 'true'
            }
            return false
          },
          rel: function (tag) {
            const { attributes, tagName } = tag;
            if (themeLinkJudge(tagName, attributes)) {
              if (attributes.href.indexOf('default') > -1) {
                return "stylesheet"
              }
              return "alternate stylesheet";
            } else if (tagName === 'link') {
              return "stylesheet"
            }
            return false;
          },
          title: function (tag) {
            const { attributes, tagName } = tag;
            if (themeLinkJudge(tagName, attributes)) {
              if (attributes.href.indexOf('light') > -1) {
                return 'light'
              } else if (attributes.href.indexOf('dark') > -1) {
                return 'dark'
              } else if (attributes.href.indexOf('default') > -1) {
                return 'default'
              } else {
                return false
              }
            }
          }
        };

        args[0].excludeAssets = [themeRegJS];
        return args;
      })
      .end();


      // HtmlWebpackPlugin生成HTML文件时，这个插件能给生成的标签注入自己需要的属性
    config
      .plugin("htmlInjectAttribute")
      .after("html")
      .use(htmlWebpackInjectAttributesPlugin)
      .end();


      // 移除多入口生成的无用script标签和JS文件
    config
      .plugin("ExcludeAssets")
      .after("htmlInjectAttribute")
      .use(HtmlWebpackExcludeAssetsPlugin)
      .end();
  },
  configureWebpack: {
    entry: {
      app: path.resolve(__dirname, "src/main.js"),
      default: path.resolve(__dirname, "src/theme/default.js"),
      light: path.resolve(__dirname, "src/theme/light"),
      dark: path.resolve(__dirname, "src/theme/dark"),
    },
  },
});