webpack.config.js

/* eslint-disable @typescript-eslint/no-var-requires */

const path = require("path")

const merge = require("webpack-merge").merge

// plugins
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CopyPlugin = require("copy-webpack-plugin")

module.exports = (env) => {
   const config = {
      entry: "./src/client/index.ts",

      resolve: {
         extensions: [".ts", ".tsx", ".js", ".json"],
      },

      module: {
         rules: [
            {
               test: /\.css$/i,
               use: [
                  {
                     loader: MiniCssExtractPlugin.loader,
                  },
                  "css-loader",
               ],
            },
         ],
      },
      optimization: {
         splitChunks: {
            chunks: "all",
         },
      },

      plugins: [
         new HtmlWebpackPlugin(),
         new CopyPlugin({
            patterns: [
               {
                  from: "assets/**",

                  // if there are nested subdirectories , keep the hierarchy
                  transformPath(targetPath, absolutePath) {
                     const assetsPath = path.resolve(__dirname, "assets")
                     const endpPath = absolutePath.slice(assetsPath.length)

                     return Promise.resolve(`assets/${endpPath}`)
                  },
               },
            ],
         }),
      ],
   }
   const envConfig = require(path.resolve(__dirname, `./webpack.${env.mode}.js`))(env)

   const mergedConfig = merge(config, envConfig)

   return mergedConfig
}