Rename static folder during build in react

If your app is not ejected, first you need to eject your app using npm run eject command.

After that, you need to replace all static/ text with your_custom_static_folder_name/ in these 3 sections of webpack.config.js file:

for js folder:

filename: isEnvProduction
    ? "static/js/[name].[contenthash:8].js"
    : isEnvDevelopment && "static/js/bundle.js",
  // There are also additional JS chunk files if you use code splitting.
  chunkFilename: isEnvProduction
    ? "static/js/[name].[contenthash:8].chunk.js"
    : isEnvDevelopment && "static/js/[name].chunk.js",
  assetModuleFilename: "static/media/[name].[hash][ext]",

for media folder:

  {
              loader: require.resolve("file-loader"),
              options: {
                name: "static/media/[name].[hash].[ext]",
              },
            },
  

for css folder:

  isEnvProduction &&
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "static/css/[name].[contenthash:8].css",
      chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
    }),