Webpack configuration for building a WordPress plugin with React and Typescript

webpack.config.babel.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ManifestPlugin = require("webpack-manifest-plugin");
const WriteFilePlugin = require("write-file-webpack-plugin");
const TerserJSPlugin = require("terser-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

const commonPlugins = [
  new MiniCssExtractPlugin({
    filename: "[name].[contenthash].css",
    chunkFilename: "[id].[contenthash].css",
  }),

  new HtmlWebpackPlugin({
    template: "./index.html",
  }),

  new ManifestPlugin(),

  new WriteFilePlugin({
    test: /^(?!.*(hot)).*/,
  }),
];
const devPlugins = [];
const prodPlugins = [
  new BundleAnalyzerPlugin({
    analyzerMode: "static",
  }),
];

module.exports = ({ NODE_ENV: env }) =>
  console.log("webpack env", env) || {
    mode: env,
    target: "web",
    entry: {
      frontend: [
        "regenerator-runtime",
        "react-hot-loader/patch",
        "./typescript/frontend.tsx",
      ],
      backend: "./typescript/backend.tsx",
    },
    output: {
      path: path.resolve(__dirname, "./dist"),
      filename: env === "development" ? "[name].js" : "[name].[hash].js",
      publicPath: "/wp-content/plugins/plugindirname/dist/",
    },
    resolve: {
      extensions: [".mjs", ".ts", ".tsx", ".js"],
      alias:
        env === "development"
          ? {
              "react-dom": "@hot-loader/react-dom",
            }
          : {},
    },
    optimization:
      env === "production"
        ? {
            minimizer: [
              new TerserJSPlugin({}),
              new OptimizeCSSAssetsPlugin({}),
            ],
          }
        : {},
    // optimization: {
    //   // minimize: env === 'production',
    // },

    stats: "errors-warnings",

    plugins:
      env === "development"
        ? [...commonPlugins, ...devPlugins]
        : [...commonPlugins, ...prodPlugins],

    devServer: {
      historyApiFallback: true,
      open: process.env.OPEN == true,
      hotOnly: true,
      clientLogLevel: "none",

      proxy: {
        "/": {
          target: "https://url.local/",
          changeOrigin: true,
          autoRewrite: true,
          secure: false,
          headers: {
            "X-Proxy": "webpack-dev-server",
          },
        },
      },

      disableHostCheck: true,

      // Allow access to WDS data from anywhere, including the standard non-proxied WP
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods":
          "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers":
          "X-Requested-With, content-type, Authorization",
      },
    },

    // devtool: 'cheap-module-source-map',
    devtool: "inline-source-map", // no bueno for production
    // devtool: 'source-map',

    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif)$/i,
          use: [
            {
              loader: "file-loader",
            },
          ],
        },

        {
          test: /\.(js)x?$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
          },
        },

        {
          test: /\.(ts)x?$/,
          exclude: /node_modules/,
          use: [
            {
              loader: "babel-loader",
            },

            {
              loader: "ts-loader",
            },
          ],
        },

        { test: /\.(woff|woff2|eot|ttf)$/, loader: "url-loader" },

        {
          test: /\.(scss|css)$/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
              options: {
                hmr: env === "development",
                reloadAll: true,
              },
            },
            "css-loader",
            // { loader: 'css-loader', options: { importLoaders: 1 } },
            "postcss-loader",
            "sass-loader",
          ],
        },
      ],
    },
  };