How to Obfuscate Classnames in ReactJS? (via CRACO and webpack)

[paulwongx]

I'm trying to obfuscate the classnames in my HTML. After researching, it seems you can do it via webpack with the code below. I understand it's best to configure webpack via CRACO (Create React App Configuration Override). Anyone know how to edit CRACO config to apply the webpack settings below?

The code I'd like to adjust in webpack.config.js:

// in webpack.config.js / loaders section
{ 
  test: /\.css$/,
  use: [
    {
      loader: 'style-loader'
    },
    {
      loader: 'css-loader',
      options: {
        modules: true,
        importLoaders: 1,
        localIdentName: '[sha1:hash:hex:4]'
      }
    }
  ]
}

As per this article

My current craco config file:

// craco.config.js
module.exports = {
    style: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
    webpack: {
      // how does the code above go in here...?
    }
  }