My go-to webpack encore config

webpack.config.js

const encore = require("@symfony/webpack-encore");
const fs = require("fs");
const path = require("path");

const frontend = path.join(__dirname, "frontend/");
const output = path.join(__dirname, "public", "build");

// Checks whether NODE_ENV is set to dev/development, otherwise defaults to production.
const env = ["dev", "development"].includes(String(process.env.NODE_ENV).toLowerCase())
  ? "development"
  : "production";

// Sets the environment if not already set.
if (!encore.isRuntimeEnvironmentConfigured()) {
  encore.configureRuntimeEnvironment(env);
}

encore
  // Split webpack runtime shenanigans into a separate chunk
  .disableSingleRuntimeChunk()

  // Split into multiple chunks
  // .splitEntryChunks()
  .enableSourceMaps(!encore.isProduction())

   // Enable versioning hashes (entry.[hash].js) (disable for dev-server)
  .enableVersioning(!encore.isDevServer())

  // Output folder
  .setOutputPath(output)

  // Path to public output folder (eg public/build => build)
  .setPublicPath("/build")

  // Add your entrypoints here
  .addEntry("main", path.join(frontend, "index.ts"))

  // Enables TypeScript
  .enableBabelTypeScriptPreset({
    isTSX: false, // If you use React, set to true
    allExtensions: true
  })

  .configureBabel((c) => {
    // Uncomment if you use React
    // c.presets.push(["@babel/preset-react", {runtime: "automatic"}])
    c.plugins.push("macros");
  })

  // Uncomment if you use Vue
  // .enableVueLoader()

  // Uncomment if you use PostCSS (requires deps: postcss-loader)
  // .enablePostCssLoader()
  
  // Uncomment if you use Sass
  // .enableSassLoader()

  // Cleans up the output folder
  .cleanupOutputBeforeBuild()

module.exports = encore.getWebpackConfig();