keycloak-modern-login/webpack.config.js

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

const THEME_NAME = "modern-login";
const customPages = [
  "login",
  "webauthn-authenticate",
  "saml-post-form",
  "select-authenticator"
];

module.exports = function (env, argv) {
  const isDevelopment = argv.mode !== "production";
  return {
    entry: () => {
      const entryList = {};
      for (const entry of customPages) {
        entryList[entry] = path.resolve(
          __dirname,
          "src",
          "views",
          entry,
          "index.ts"
        );
      }
      return entryList;
    },
    output: {
      path: path.resolve(__dirname, "dist", "theme", THEME_NAME, "login"),
      filename: "resources/js/[name].js",
      publicPath: "/",
    },
    devtool: "inline-cheap-module-source-map",
    resolve: {
      extensions: [".ts", ".tsx", ".js", ".vue", ".json", ".scss"],
      alias: {
        "~": path.resolve(__dirname, "src"),
      },
    },
    mode: isDevelopment ? "development" : "production",
    watch: isDevelopment,
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: "vue-loader",
          options: {
            sourceMap: isDevelopment,
            extract: false,
          },
        },
        {
          test: /\.(ts|tsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env", "@babel/preset-typescript"],
              plugins: [
                "@babel/plugin-transform-runtime",
                "@babel/plugin-transform-typescript",
              ],
            },
          },
        },
        {
          test: /\.css$/,
          use: [
            "style-loader",
            "css-loader",
            {
              loader: "postcss-loader",
              options: {
                postcssOptions: {
                  plugins: {
                    tailwindcss: {},
                    autoprefixer: {},
                  },
                },
              },
            },
          ],
        },
      ],
    },
    plugins: [
      new CleanWebpackPlugin(),
      new VueLoaderPlugin(),
      ...customPages.map(
        entry =>
          new HtmlWebpackPlugin({
            inject: false,
            template: path.resolve(
              __dirname,
              "src",
              "views",
              entry,
              "index.ftl"
            ),
            filename: `${entry}.ftl`,
            minify: false,
          })
      ),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, "src", "static", "login"),
            to: path.resolve(__dirname, "dist", "theme", THEME_NAME, "login"),
          },
          {
            from: path.resolve(__dirname, "src", "static", "jar"),
            to: path.resolve(__dirname, "dist"),
          },
        ],
      }),
    ],
    ...(isDevelopment
      ? {}
      : {
          optimization: {
            removeAvailableModules: false,
            removeEmptyChunks: false,
            splitChunks: false,
          },
        }),
  };
};