4

我已经使用 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 配置中覆盖它。如果有人确切知道需要覆盖哪个位，我将非常感谢您的帮助！

4

0 回答 0