通过 webpack config-override 将所有 css 文件合并为一个答案

【问题标题】：Combine all css files into one via webpack config-override通过 webpack config-override 将所有 css 文件合并为一个
【发布时间】：2020-11-13 17:43:00
【问题描述】：

我正在对一个大型 React 应用程序进行重构，以用作微前端应用程序。我只需要在根文件夹中生成一个 css 文件，该项目有 styled-components、css 和 scss 文件。它是用 create-react-app 构建的，并且具有配置覆盖。我该怎么做？

    config => {
      config.entry = "./src/app-legacy.js";
      config.output = {
        ...config.output,
        filename: "app-legacy.js",
        libraryTarget: "system",
        publicPath: projectURI
      };
      config.externals = ["single-spa", "react", "react-dom"];
      delete config.optimization;

      config.plugins.push(
        new MiniCssExtractPlugin({ filename: "app-legacy.css" })
      );
      config.module.rules.push({
        test: /\.(sa|sc|c)ss$/,
        use: ["css-loader", "sass-loader", MiniCssExtractPlugin.loader]
      });
      config.plugins = config.plugins.filter(
        plugin => plugin.constructor.name !== "HtmlWebpackPlugin"
      );
      return config;
    }

我目前正在尝试使用 MiniCssExtractPlugin 执行此操作，但我无法使其工作

【问题讨论】：

标签： reactjs webpack mini-css-extract-plugin

【解决方案1】：

您需要在 MiniCssExtractPlugin 对象中添加“chunkFilename”选项，如下所示：

config.plugins.push(
    new MiniCssExtractPlugin({ 
          filename: "app-legacy.css",
          chunkFilename: '[name].[hash].css', })
  );

并将您的 css/scss 文件规则重新排列为：

 config.module.rules.push({
    test: /\.(sa|sc|c)ss$/,
    use: [MiniCssExtractPlugin.loader,'css-loader', 'sass-loader',]
  });

所以，现在 webpack 将首先使用 sass-loader 解析 css/scss/sass 文件，然后使用 css-loader，最后使用 MiniCssExtractPlugin.loader 来生成 css 块。

【讨论】：