Webpack Code Splitting - Prevent Duplicate CSS File in Build

Viewed 1197

I've bootstrapped my app with Create-React-App version 3.4.1 and am using Craco version 5.6.4 to make modifications to the Webpack config CRA provides. Due to specific client expectations which are out of my control, I need to end up with build/js/main.js and build/css/main.css file structure. I've managed to, with Craco, modify the file output as desired, except that I end up with an additional copy of the CSS file with the chunk hash added.

Here's my 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',
      },
    },
  },
};

And here's what's being output when I run 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

...

(Yes, the CSS file presently has no rules in it, which explains its small size.)

My goal is to eliminate creation of that second file, build/static/css/main.0cb9b881.css.

I've tried numerous alterations to my config, including https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-all-css-in-a-single-file, to no avail. I'm able to generate the CSS file I want using MiniCssExtractPlugin to specify a filename, and to generate the single JS bundle using the standard Webpack output filename. This is a non-ejected CRA-generated app, so I'm guessing there's some mechanism inside the built-in Webpack config that's generating that extra file and that I just need to override that in my Craco config. If anyone knows precisely which bit needs to be overridden, I'd greatly appreciate the help!

0 Answers
Related