Webpack Config File

webpack.config.js

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  context: __dirname,
  entry: {
    main: "./src/index.js",
  },
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"]
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/[hash].js",
    publicPath: "/"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
      {
        test: /\.svg$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "@svgr/webpack",
          }
        ],
      },
      {
        test: /\.(s[ac]|c)ss$/i,
        exclude: /node_modules/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          {
              loader: "css-loader",
              options: {
                  modules: {
                    localIdentName: "[local]--[hash:base64:5]",
                    namedExport: true
                  }
              }
          },
          "postcss-loader",
          "sass-loader"
        ],
      },
      {
        test: /\.(sa|sc|c)ss$/i,
        include: /node_modules/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          {
            loader: "css-loader",
          },
          'sass-loader',
        ],
      },
      {
        test: /\.(png|mp3|mp4|jpg|jpeg|gif|ttf|ico)$/,
        exclude: /node_modules/,
        type: "asset/resource",
        generator: {
          filename: 'assets/[contenthash].[ext]'
        }
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    hot: true,
    port: 3000,
 },
 plugins: [
  new HtmlWebPackPlugin({
    template: path.resolve(__dirname, "public/index.html"),
    filename: "index.html",
    favicon: path.resolve(__dirname, "public/favicon.ico")
  }),
  new MiniCssExtractPlugin({
    filename: 'assets/[name].[hash].css',
    chunkFilename: "assets/[id]--[hash].css",
    ignoreOrder: false,
  }),
  new CopyWebpackPlugin({
    patterns: [
      { from: 'src/assets/plyr', to: 'plyr' },
      { from: 'public/robots.txt', to: 'robots.txt' },
      { from: 'public/version', to: "" }
    ]
  }),
 ],
  target: "web",
  devtool: false,
  mode: "production"
};