react-ts-webpack5

webpack.config.ts

import path from 'path';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import webpack from 'webpack';
// import HtmlWebpackPlugin from 'html-webpack-plugin';

const currentScript = process.env.npm_lifecycle_event;

console.log({ currentScript });

const prod = process.env.NODE_ENV === 'production';

// const plugins = [
//   new ForkTsCheckerWebpackPlugin({
//     async: false,
//     eslint: {
//       files: './src/ts/**/*.{ts,tsx,js,jsx}'
//     }
//   }),
//   new HtmlWebpackPlugin()
// ] as [any, any];
const plugins = [
  new ForkTsCheckerWebpackPlugin({
    async: false,
    eslint: {
      files: './src/ts/**/*.{ts,tsx,js,jsx}'
    }
  })
] as [any];

if (currentScript && currentScript.includes('analysis')) {
  plugins.push(new BundleAnalyzerPlugin());
}

const config: webpack.Configuration = {
  entry: {
    product: './src/ts/product.tsx',
    cart: './src/ts/cart.tsx'
  },
  devtool: false,
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
              '@babel/preset-typescript'
            ]
          }
        }
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    path: path.resolve(__dirname, 'theme/assets'),
    filename: 'project-[name].bundle.js',
    clean: {
      keep(asset: string): boolean {
        return !/project-.*.bundle.js/.test(asset);
      }
    }
  },
  plugins,
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        lib: {
          name: 'product-lib',
          test: /[\\/]node_modules[\\/](react-query|smoothscroll-polyfill|react-slick)[\\/]/,
          priority: -8,
          reuseExistingChunk: true
        },
        react: {
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
          name: 'react',
          priority: -9,
          reuseExistingChunk: true
        },
        vendor: {
          name: 'vendor',
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true
        },
        custom: {
          name: 'custom',
          test: /[\\/]src[\\/]ts[\\/](components[\\/]common|hooks|utils)[\\/]/,
          priority: -10,
          reuseExistingChunk: true
        }
      }
    }
  }
};

if (prod) {
  config.mode = 'production';
}

export default config;