craco config for wepback typescript create react app

webpack-craco-config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { addBeforeLoader, loaderByName } = require("@craco/craco");
// eslint-disable-next-line @typescript-eslint/no-var-requires
// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require("path");

module.exports = {
  devServer: (devServerConfig) => {
    devServerConfig.writeToDisk = true;
    return devServerConfig;
  },
  webpack: {
    // plugins: {
    //   add: [
    //     new webpack.DefinePlugin({
    //       process: {env: {}}
    //     })
    //   ]
    // },
    configure: (webpackConfig, { env, paths }) => {
      const fileLoader = {
        test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        loader: require.resolve("file-loader"),
        // Exclude `js` files to keep "css" loader working as it injects
        // its runtime that would otherwise be processed through "file" loader.
        // Also exclude `html` and `json` extensions so they get processed
        // by webpacks internal loaders.
        exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
        options: {
          name: "static/media/[name].[ext]"
        }
      };

      paths.appBuild = webpackConfig.output.path = path.resolve("build");
      webpackConfig.output.filename = "react-bundle.js";
      webpackConfig.optimization.runtimeChunk = false;
      webpackConfig.optimization.splitChunks = {
        cacheGroups: {
          default: false
        }
      };

      addBeforeLoader(webpackConfig, loaderByName("file-loader"), fileLoader);

      return webpackConfig;
    }
  }
};