Webpack 代码分割 - 防止构建中出现重复的 CSS 文件

Question

我已经使用 Create-React-App 版本 3.4.1 启动了我的应用程序，并使用 Craco 版本 5.6.4 对 CRA 提供的 Webpack 配置进行修改。由于特定的客户期望超出了我的控制范围，我需要最终确定build/js/main.js文件build/css/main.css结构。我已经成功地与 Craco 一起根据需要修改文件输出，只是我最终得到了 CSS 文件的附加副本，并添加了块哈希。

这是我的craco.config.js：

const { POSTCSS_MODES } = require('@craco/craco');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  style: {
    postcss: {
      mode: POSTCSS_MODES.file,
    },
  },
  webpack: {
    configure: {
      optimization: {
        splitChunks: {
          cacheGroups: {
            default: false,
          },
        },
        runtimeChunk: false,
      },
      plugins: [
        new webpack.optimize.LimitChunkCountPlugin({
          maxChunks: 1,
        }),
        new MiniCssExtractPlugin({
          filename: 'css/[name].css',
        }),
      ],
      output: {
        filename: 'js/[name].js',
      },
    },
  },
};

这是我运行时输出的内容yarn build：

...

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  60.31 KB  build/js/main.js
  66 B      build/static/css/main.0cb9b881.css
  57 B      build/css/main.css

...

（是的，CSS 文件目前没有规则，这解释了它的大小。）

我的目标是消除第二个文件build/static/css/main.0cb9b881.css.

我已经尝试对我的配置进行多次更改，包括https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-all-css-in-a-single-file，但无济于事。我能够使用 MiniCssExtractPlugin 指定文件名来生成我想要的 CSS 文件，并使用标准 Webpackoutput文件名生成单个 JS 包。这是一个非弹出的 CRA 生成的应用程序，所以我猜测内置 Webpack 配置中有一些机制可以生成该额外文件，我只需要在我的 Craco 配置中覆盖它即可。如果有人确切知道需要覆盖哪一位，我将非常感谢您的帮助！

Answer 1

事实上，你的 webpack 配置中已经有两个“MiniCssExtractPlugin”对象。只需要将原来的“MiniCssExtractPugin”的“filename”属性改为“static/cs s/[name].css”，而不需要添加“MiniCssExtractPlugin”对象。