bs-manager/.erb/configs/webpack.config.renderer.prod.ts

/**
 * Build config for electron renderer process
 */

import path from "path";
import webpack from "webpack";
import HtmlWebpackPlugin from "html-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
import { merge } from "webpack-merge";
import TerserPlugin from "terser-webpack-plugin";
import baseConfig from "./webpack.config.base";
import webpackPaths from "./webpack.paths";
import checkNodeEnv from "../scripts/check-node-env";
import deleteSourceMaps from "../scripts/delete-source-maps";
import { AppWindow } from "../../src/shared/models/window-manager/app-window.model";

checkNodeEnv("production");
deleteSourceMaps();

const devtoolsConfig =
    process.env.DEBUG_PROD === "true"
        ? {
              devtool: "source-map",
          }
        : {};

const getHtmlPageOptions = (page: AppWindow): HtmlWebpackPlugin.Options => {
    return {
        filename: path.join(page),
        template: path.join(webpackPaths.srcRendererPath, page.replace(".html", ".ejs")),
        minify: {
            collapseWhitespace: true,
            removeAttributeQuotes: true,
            removeComments: true,
        },
        isBrowser: false,
        env: process.env.NODE_ENV,
        isDevelopment: process.env.NODE_ENV !== "production",
        nodeModules: webpackPaths.appNodeModulesPath,
    };
};

const configuration: webpack.Configuration = {
    ...devtoolsConfig,

    mode: "production",

    target: ["web", "electron-renderer"],

    entry: [path.join(webpackPaths.srcRendererPath, "index.tsx")],

    output: {
        path: webpackPaths.distRendererPath,
        publicPath: "./",
        filename: "renderer.js",
        library: {
            type: "umd",
        },
    },

    module: {
        rules: [
            {
                test: /\.s?(a|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            sourceMap: true,
                            importLoaders: 1,
                        },
                    },
                    "sass-loader",
                ],
                include: /\.module\.s?(c|a)ss$/,
            },
            {
                test: /\.s?(a|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [require("tailwindcss"), require("autoprefixer")],
                            },
                        },
                    },
                ],
                exclude: /\.module\.s?(c|a)ss$/,
            },
            // Fonts
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: "asset/resource",
            },
            // Images
            {
                test: /\.(png|svg|jpg|jpeg|gif|mp4|webp)$/i,
                type: "asset/resource",
            },
        ],
    },

    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                parallel: true,
            }),
            new CssMinimizerPlugin(),
        ],
    },

    plugins: [
        /**
         * Create global constants which can be configured at compile time.
         *
         * Useful for allowing different behaviour between development builds and
         * release builds
         *
         * NODE_ENV should be production so that modules do not perform certain
         * development checks
         */
        new webpack.EnvironmentPlugin({
            NODE_ENV: "production",
            DEBUG_PROD: false,
        }),

        new MiniCssExtractPlugin({
            filename: "style.css",
        }),

        new BundleAnalyzerPlugin({
            analyzerMode: process.env.ANALYZE === "true" ? "server" : "disabled",
        }),

        new HtmlWebpackPlugin(getHtmlPageOptions("index.html")),
        new HtmlWebpackPlugin(getHtmlPageOptions("launcher.html")),
        new HtmlWebpackPlugin(getHtmlPageOptions("oneclick-download-map.html")),
        new HtmlWebpackPlugin(getHtmlPageOptions("oneclick-download-playlist.html")),
        new HtmlWebpackPlugin(getHtmlPageOptions("oneclick-download-model.html")),
        new HtmlWebpackPlugin(getHtmlPageOptions("shortcut-launch.html")),
    ],
};

export default merge(baseConfig, configuration);