Berikut ini adalah cara install atau konfigurasi awal untuk membuat webpack frontend environtment:

npm init -y
npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev css-loader css-minimizer-webpack-plugin html-webpack-plugin mini-css-extract-plugin style-loader terser-webpack-plugin

Berikut ini adalah webpack.config.js untuk environtment frontend dengan ExtJs 3

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = (env, argv) => {
  const isDev = argv.mode === "development";
  const keepConsole = process.env.KEEP_CONSOLE === "true";

  return {
    entry: "./src/js/main.js",

    output: {
      filename: "assets/js/[name].js",
      path: path.resolve(__dirname, "dist"),
      publicPath: isDev ? "/" : "https://sikepext.arul.dev/",
      clean: true,
    },

    devServer: {
      static: {
        directory: path.join(__dirname, "dist"),
      },
      compress: true,
      hot: true,
      proxy: [
        {
          context: () => true, // proxy all requests
          target: "https://sikepext.arul.dev",
          changeOrigin: true,
          secure: false,
        },
      ],
    },

    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [
            // Use style-loader in dev for proper HMR support,
            // MiniCssExtractPlugin in prod to extract to separate files
            isDev ? "style-loader" : MiniCssExtractPlugin.loader,
            "css-loader",
          ],
        },
        {
          test: /\.(png|svg|jpe?g|gif)$/i,
          type: "asset/resource",
          generator: {
            filename: "assets/img/[contenthash].[ext]",
          },
        },
      ],
    },

    optimization: {
      minimize: !isDev,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              // Drop console logs in prod unless KEEP_CONSOLE=true env var is set.
              // Useful for debugging staging builds without changing config.
              drop_console: !isDev && !keepConsole,
            },
          },
          // Set to false to avoid generating .LICENSE.txt files in dist
          extractComments: true,
        }),
        new CssMinimizerPlugin({
          minimizerOptions: {
            preset: [
              "default",
              {
                discardComments: { removeAll: true }, // removes ALL comments including /*! preserved */
              },
            ],
          },
        }),
      ],
      splitChunks: {
        chunks: "all",
        minSize: 0,
        // 244KB is a better sweet spot for HTTP/2 (vs 150KB which causes excessive splits)
        maxSize: 244000,
        cacheGroups: {
          // Disable built-in default group
          default: false,

          // Local ExtJS vendor folder (e.g. /vendor/extjs)
          vendorLocal: {
            test: /[\\/]vendor[\\/]/,
            name: "extjs-pack",
            enforce: true, // create chunk regardless of size
          },

          // npm packages from node_modules
          vendorNpm: {
            test: /[\\/]node_modules[\\/]/,
            name: "npm-pack",
            chunks: "all",
          },

          // src/module/* — lazily loaded feature modules
          appModules: {
            test: /[\\/]src[\\/]module[\\/]/,
            name: "app-modules",
            chunks: "async",
            minChunks: 2,
            priority: 10,
            enforce: false,
          },

          // src/*.js — top-level entry files (main.js, other-app.js, etc.)
          // Shared code between entries gets pulled into this chunk
          appCore: {
            test(module) {
              // Match js files sitting directly in src/ (not in any subfolder)
              return /[\\/]src[\\/][^\\/]+\.js$/.test(module.resource ?? "");
            },
            name: "app-core",
            chunks: "initial", // only synchronous (initial load) chunks
            minChunks: 2, // only if shared between 2+ entry points
            priority: 5,
            enforce: false,
          },
        },
      },
    },

    plugins: [
      new HtmlWebpackPlugin({
        title: "SIKEP - Sikep Web Application",
        heading: "SIKEP UNILA",
        subheading:
          "Sistem Informasi Manajemen Kepegawaian Universitas Lampung (ver. 2.0)",
        favicon: "./src/img/favicon.ico",
        filename: "index.html",
        hash: true,
        template: "src/index.html",
      }),

      // Only instantiate MiniCssExtractPlugin in production.
      // In dev, style-loader is used instead (supports HMR).
      ...(!isDev
        ? [
            new MiniCssExtractPlugin({
              filename: "assets/css/[name].min.css",
              ignoreOrder: false,
            }),
          ]
        : []),
    ],

    resolve: {
      alias: {
        extjs: path.resolve(__dirname, "vendor/extjs"),
      },
    },
  };
};