@pinnacle0/webpack-util 0.3.25 → 0.3.26

package/src/WebpackConfigGenerator/{ConfigEntryDescriptorsFactory.js → ConfigEntryDescriptorsFactory.ts}

@@ -1,20 +1,24 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConfigEntryDescriptorsFactory = void 0;
-const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
-const Constant_1 = require("../Constant");
-class ConfigEntryDescriptorsFactory {
-    static generate({ indexName, projectSrcDirectory, extraEntries }) {
-        const entryDescriptors = [];
+import fs from "fs";
+import path from "path";
+import {Constant} from "../Constant";
+import type {EntryDescriptor} from "../type";
+
+interface ConfigEntryDescriptorsFactoryOptions {
+    indexName: string;
+    projectSrcDirectory: string;
+    extraEntries: Record<string, string>;
+}
+
+export class ConfigEntryDescriptorsFactory {
+    static generate({indexName, projectSrcDirectory, extraEntries}: ConfigEntryDescriptorsFactoryOptions): EntryDescriptor[] {
+        const entryDescriptors: EntryDescriptor[] = [];
+
         const mainEntryDescriptor = ConfigEntryDescriptorsFactory.createEntryDescriptor({
             name: indexName,
             directory: projectSrcDirectory,
         });
         entryDescriptors.push(mainEntryDescriptor);
+
         for (const [extraEntryName, extraEntryDirectory] of Object.entries(extraEntries)) {
             const extraEntryDescriptor = ConfigEntryDescriptorsFactory.createEntryDescriptor({
                 name: extraEntryName,
@@ -22,52 +26,55 @@ class ConfigEntryDescriptorsFactory {
             });
             entryDescriptors.push(extraEntryDescriptor);
         }
+
         return entryDescriptors;
     }
-    static createEntryDescriptor({ name, directory }) {
+
+    private static createEntryDescriptor({name, directory}: {name: string; directory: string}): EntryDescriptor {
         const entryPath = ConfigEntryDescriptorsFactory.findEntryFilepath(directory);
         const htmlPath = ConfigEntryDescriptorsFactory.findEntryHTMLFilepath(directory);
+
         if (entryPath === null) {
-            throw new Error(`Cannot find entry file for "${name}" in "${directory}", files checked: ${Constant_1.Constant.mainEntryFilenames.join("/")}`);
+            throw new Error(`Cannot find entry file for "${name}" in "${directory}", files checked: ${Constant.mainEntryFilenames.join("/")}`);
         }
+
         if (htmlPath === null) {
             // Output is a pure js entry (without a companion `index.html` template file)
             // Do not include a hash in the output filenames.
             // One particular use case for this is create a "third-party-error-handler" pure js entry,
             // so this static filename can be hard coded at our backend.
             const outputFilename = "static/js/[name].js";
-            return { name, entryPath, outputFilename };
-        }
-        else {
+            return {name, entryPath, outputFilename};
+        } else {
             // Output is an html entry (with a companion `index.html` template file)
             // We might want to include a hash to the output filenames
             // (don't set the output filename to contain hash for profiling build).
             const outputFilename = "static/js/[chunkhash:8].js";
-            return { name, entryPath, outputFilename, htmlPath };
+            return {name, entryPath, outputFilename, htmlPath};
         }
     }
-    static findEntryFilepath(searchDirectory) {
-        if (!(fs_1.default.existsSync(searchDirectory) && fs_1.default.statSync(searchDirectory).isDirectory())) {
+
+    private static findEntryFilepath(searchDirectory: string): string | null {
+        if (!(fs.existsSync(searchDirectory) && fs.statSync(searchDirectory).isDirectory())) {
             return null;
         }
-        for (const filename of Constant_1.Constant.mainEntryFilenames) {
-            const filepath = path_1.default.join(searchDirectory, filename);
-            if (fs_1.default.existsSync(filepath) && fs_1.default.statSync(filepath).isFile()) {
+        for (const filename of Constant.mainEntryFilenames) {
+            const filepath = path.join(searchDirectory, filename);
+            if (fs.existsSync(filepath) && fs.statSync(filepath).isFile()) {
                 return filepath;
             }
         }
         return null;
     }
-    static findEntryHTMLFilepath(searchDirectory) {
-        if (!(fs_1.default.existsSync(searchDirectory) && fs_1.default.statSync(searchDirectory).isDirectory())) {
+
+    private static findEntryHTMLFilepath(searchDirectory: string): string | null {
+        if (!(fs.existsSync(searchDirectory) && fs.statSync(searchDirectory).isDirectory())) {
             return null;
         }
-        const filepath = path_1.default.join(searchDirectory, "index.html");
-        if (fs_1.default.existsSync(filepath) && fs_1.default.statSync(filepath).isFile()) {
+        const filepath = path.join(searchDirectory, "index.html");
+        if (fs.existsSync(filepath) && fs.statSync(filepath).isFile()) {
             return filepath;
         }
         return null;
     }
 }
-exports.ConfigEntryDescriptorsFactory = ConfigEntryDescriptorsFactory;
-//# sourceMappingURL=ConfigEntryDescriptorsFactory.js.map

package/src/WebpackConfigGenerator/HTMLWebpackPluginsFactory.ts

@@ -0,0 +1,24 @@
+import type webpack from "webpack";
+import type {EntryDescriptor} from "../type";
+import {Plugin} from "./Plugin";
+
+interface HTMLWebpackPluginsFactoryOptions {
+    configEntryDescriptors: EntryDescriptor[];
+}
+
+export class HTMLWebpackPluginsFactory {
+    static generate({configEntryDescriptors}: HTMLWebpackPluginsFactoryOptions): webpack.Plugin[] {
+        const htmlPlugins: webpack.Plugin[] = [];
+
+        for (const {name, entryPath, htmlPath} of configEntryDescriptors) {
+            if (htmlPath !== undefined) {
+                const plugin = Plugin.fileOutput.html({
+                    entry: {name, entryPath, htmlPath},
+                });
+                htmlPlugins.push(plugin);
+            }
+        }
+
+        return htmlPlugins;
+    }
+}

package/src/WebpackConfigGenerator/Plugin/css.plugin.ts

@@ -0,0 +1,31 @@
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import CssMinimizerWebpackPlugin from "css-minimizer-webpack-plugin";
+import type webpack from "webpack";
+import {WebpackConfigSerializationUtil} from "../WebpackConfigSerializationUtil";
+
+interface ExtractCssPluginOptions {
+    enableProfiling: boolean;
+}
+
+/**
+ * Applies CssNano to minimize stylesheets
+ * after bundles/chunks are built.
+ */
+export function cssMinimizerPlugin(): webpack.WebpackPluginInstance {
+    return WebpackConfigSerializationUtil.serializablePlugin("CssMinimizerWebpackPlugin", CssMinimizerWebpackPlugin);
+}
+
+/**
+ * Extract output of css transformation pipeline to standalone css files.
+ * Must be used with `MiniCssExtractPlugin.loader`, which is included with
+ * `Rule.stylesheet({minimize: true})`.
+ */
+export function miniCssExtractPlugin({enableProfiling}: ExtractCssPluginOptions): webpack.WebpackPluginInstance {
+    return WebpackConfigSerializationUtil.serializablePlugin("MiniCssExtractPlugin", MiniCssExtractPlugin, {
+        filename: enableProfiling ? "static/css/[name].[contenthash:8].css" : "static/css/[contenthash:8].css",
+        // order of css output depends on the order of imports in js,
+        // unless all imports in js are sorted (e.g. by alphabetical order),
+        // this flag must be set to true to avoid error
+        ignoreOrder: true,
+    });
+}

package/src/WebpackConfigGenerator/Plugin/html.plugin.ts

@@ -0,0 +1,47 @@
+import HTMLWebpackPlugin from "html-webpack-plugin";
+import {ScriptTagCrossOriginPlugin} from "./script-tag-crossorigin-plugin";
+import type webpack from "webpack";
+import type {HTMLEntryDescriptor} from "../../type";
+import {WebpackConfigSerializationUtil} from "../WebpackConfigSerializationUtil";
+
+interface HTMLPluginOptions {
+    entry: HTMLEntryDescriptor;
+}
+
+/**
+ * Creates a html file from a template with <script> and <link> injected
+ * with the respective hashed output filenames.
+ */
+export function htmlPlugin({entry}: HTMLPluginOptions): webpack.WebpackPluginInstance {
+    return WebpackConfigSerializationUtil.serializablePlugin("HTMLWebpackPlugin", HTMLWebpackPlugin, {
+        template: entry.htmlPath,
+        filename: `${entry.name}.html`,
+        chunks: [entry.name],
+        minify: {
+            collapseBooleanAttributes: true,
+            collapseInlineTagWhitespace: true,
+            collapseWhitespace: true,
+            includeAutoGeneratedTags: false,
+            keepClosingSlash: true,
+            minifyCSS: true,
+            minifyJS: true,
+            minifyURLs: true,
+            removeAttributeQuotes: true,
+            removeComments: true,
+            removeEmptyAttributes: true,
+            removeRedundantAttributes: true,
+            removeScriptTypeAttributes: true,
+            removeStyleLinkTypeAttributes: true,
+            removeTagWhitespace: true,
+            useShortDoctype: true,
+        },
+    });
+}
+
+/**
+ * Adds attributes to `<script>` tag inside html file generated by
+ * HTMLWebpackPlugin. Used to add `crossorigin="anonymous"`.
+ */
+export function scriptTagCrossOriginPlugin(): webpack.WebpackPluginInstance {
+    return WebpackConfigSerializationUtil.serializablePlugin("ScriptTagCrossOriginPlugin", ScriptTagCrossOriginPlugin);
+}

package/src/WebpackConfigGenerator/Plugin/index.ts

@@ -0,0 +1,33 @@
+import {cssMinimizerPlugin, miniCssExtractPlugin} from "./css.plugin";
+import {scriptTagCrossOriginPlugin, htmlPlugin} from "./html.plugin";
+import {ignoreMomentLocalePlugin} from "./moment.plugin";
+import {reactRefreshPlugin, terserPlugin} from "./ts.plugin";
+import {webpackDefinePlugin, webpackProgressPlugin} from "./webpack.plugin";
+
+/**
+ * Static factories to create \`webpack.config#plugins\` items.
+ *
+ * Plugins with similar functionality are grouped under a js object (as a namespace).
+ */
+export class Plugin {
+    static readonly scriptTagCrossOriginPlugin = scriptTagCrossOriginPlugin;
+
+    static readonly ignoreMomentLocale = ignoreMomentLocalePlugin;
+
+    static readonly reactRefresh = reactRefreshPlugin;
+
+    static readonly fileOutput = {
+        html: htmlPlugin,
+        miniCssExtract: miniCssExtractPlugin,
+    };
+
+    static readonly minimizer = {
+        terser: terserPlugin,
+        css: cssMinimizerPlugin,
+    };
+
+    static readonly webpack = {
+        progress: webpackProgressPlugin,
+        define: webpackDefinePlugin,
+    };
+}

package/src/WebpackConfigGenerator/Plugin/{moment.plugin.js → moment.plugin.ts}

@@ -1,11 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ignoreMomentLocalePlugin = void 0;
-const webpack_1 = __importDefault(require("webpack"));
-const WebpackConfigSerializationUtil_1 = require("../WebpackConfigSerializationUtil");
+import webpack from "webpack";
+import {WebpackConfigSerializationUtil} from "../WebpackConfigSerializationUtil";
+
 /**
  * Prevents moment locales from being bundled by importing moment
  * (moment by default imports all locales)
@@ -14,8 +9,8 @@ const WebpackConfigSerializationUtil_1 = require("../WebpackConfigSerializationU
  * To include a locale, it must be explicitly imported
  * (preferably at the entry file).
  */
-function ignoreMomentLocalePlugin() {
-    return WebpackConfigSerializationUtil_1.WebpackConfigSerializationUtil.serializablePlugin("webpack.IgnorePlugin", webpack_1.default.IgnorePlugin, {
+export function ignoreMomentLocalePlugin(): webpack.WebpackPluginInstance {
+    return WebpackConfigSerializationUtil.serializablePlugin("webpack.IgnorePlugin", webpack.IgnorePlugin, {
         // check dependency-request against the provided regex,
         // and exclude resource from final bundle if matched;
         // e.g. `/^\.\/locale$/` matches the dependency-request `require("./locale/" + name)`
@@ -25,5 +20,3 @@ function ignoreMomentLocalePlugin() {
         contextRegExp: /moment$/,
     });
 }
-exports.ignoreMomentLocalePlugin = ignoreMomentLocalePlugin;
-//# sourceMappingURL=moment.plugin.js.map

package/src/WebpackConfigGenerator/Plugin/script-tag-crossorigin-plugin.ts

@@ -0,0 +1,22 @@
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import type webpack from "webpack";
+
+const PLUGIN_NAME = "ScriptTagCrossOriginPlugin";
+
+// This plugin adds crossorigin="anonymous" to html-webpack-plugin generated <script> tags, only work with html-webpack-plugin@4.0.0+
+export class ScriptTagCrossOriginPlugin implements webpack.WebpackPluginInstance {
+    apply(compiler: webpack.Compiler): void {
+        compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
+            const hook = HtmlWebpackPlugin.getHooks(compilation).alterAssetTags;
+            hook.tap(PLUGIN_NAME, result => {
+                const {assetTags} = result;
+                for (const scriptTag of assetTags.scripts) {
+                    if (scriptTag.attributes?.src && /.js$/.test(scriptTag.attributes.src.toString())) {
+                        scriptTag.attributes.crossorigin = "anonymous";
+                    }
+                }
+                return result;
+            });
+        });
+    }
+}

package/src/WebpackConfigGenerator/Plugin/ts.plugin.ts

@@ -0,0 +1,29 @@
+import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
+import TerserWebpackPlugin from "terser-webpack-plugin";
+import type webpack from "webpack";
+import {WebpackConfigSerializationUtil} from "../WebpackConfigSerializationUtil";
+
+interface TerserPluginOptions {
+    sourceMap: boolean;
+}
+
+/**
+ * Applies Terser to minimize javascript
+ * after bundles/chunks are built.
+ */
+export function terserPlugin({sourceMap}: TerserPluginOptions): webpack.WebpackPluginInstance {
+    return WebpackConfigSerializationUtil.serializablePlugin("TerserWebpackPlugin", TerserWebpackPlugin, {
+        terserOptions: {
+            sourceMap,
+        },
+    });
+}
+
+/**
+ * Adds react fast refresh functionality.
+ * Requires babel plugin "react-refresh/babel".
+ * Should not be used in production.
+ */
+export function reactRefreshPlugin(): webpack.WebpackPluginInstance {
+    return WebpackConfigSerializationUtil.serializablePlugin("ReactRefreshPlugin", ReactRefreshWebpackPlugin);
+}

package/src/WebpackConfigGenerator/Plugin/webpack.plugin.ts

@@ -0,0 +1,21 @@
+import webpack from "webpack";
+import {WebpackConfigSerializationUtil} from "../WebpackConfigSerializationUtil";
+
+interface WebpackProgressPluginOptions {
+    enableProfiling: boolean;
+}
+
+/**
+ * Reports progress during compilation.
+ * Basically the same behavior as running webpack-cli with:
+ * `$ webpack --progress`
+ */
+export function webpackProgressPlugin({enableProfiling}: WebpackProgressPluginOptions): webpack.WebpackPluginInstance {
+    return WebpackConfigSerializationUtil.serializablePlugin("webpack.ProgressPlugin", webpack.ProgressPlugin, {
+        profile: enableProfiling,
+    });
+}
+
+export function webpackDefinePlugin(map: {[key: string]: string}): webpack.WebpackPluginInstance {
+    return WebpackConfigSerializationUtil.serializablePlugin("webpack.DefinePlugin", webpack.DefinePlugin, map);
+}

package/src/WebpackConfigGenerator/Rule/{RegExpUtil.js → RegExpUtil.ts}

@@ -1,26 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RegExpUtil = void 0;
-class RegExpUtil {
-    static fileExtension(...extensions) {
-        const escapedExtensions = [];
+export class RegExpUtil {
+    static fileExtension(...extensions: [string, ...string[]]): RegExp {
+        const escapedExtensions: string[] = [];
         for (const ext of extensions) {
             RegExpUtil.validateFileExtension(ext);
-            escapedExtensions.push(ext.replace(/\./g, String.raw `\.`));
+            escapedExtensions.push(ext.replace(/\./g, String.raw`\.`));
         }
         return new RegExp(`(${escapedExtensions.join("|")})$`);
     }
-    static validateFileExtension(ext) {
+
+    private static validateFileExtension(ext: string): void {
         if (ext.trim() === "") {
             throw new Error("Extension cannot be empty.");
-        }
-        else if (/\s/.test(ext)) {
+        } else if (/\s/.test(ext)) {
             throw new Error(`Extension cannot contain whitespace, received: "${ext}".`);
-        }
-        else if (!/^(\.[a-z0-9]+)+$/.test(ext)) {
+        } else if (!/^(\.[a-z0-9]+)+$/.test(ext)) {
             throw new Error(`Extension should begin with dot, and contains lowercase letters and numbers, received: "${ext}".`);
         }
     }
 }
-exports.RegExpUtil = RegExpUtil;
-//# sourceMappingURL=RegExpUtil.js.map

package/src/WebpackConfigGenerator/Rule/{core-fe-hmr-babel-plugin.js → core-fe-hmr-babel-plugin.ts}

@@ -1,5 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+import type * as babel from "@babel/core";
+
+interface State extends Pick<babel.PluginPass, "file" | "key" | "opts" | "cwd" | "filename"> {
+    hasInjectedDeclineWebpackHMRNode: boolean;
+}
+
 /**
  * Injects `if (module.hot) module.hot.decline()` code snippet in files that contains "core-fe" Module classes.
  *
@@ -7,39 +11,68 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * otherwise react loses refrence of the MainComponent created by `ModuleProxy` in "core-fe"
  * and throws a runtime error during development (which is bad for developer experience).
  */
-function default_1({ types: t }) {
+export default function ({types: t}: typeof babel): babel.PluginObj<State> {
     return {
         visitor: {
             ImportDeclaration(path, state) {
                 if (state.hasInjectedDeclineWebpackHMRNode) {
                     return;
                 }
-                const { node: { source: { value: importSource }, specifiers: importSpecifiers, }, } = path;
+
+                const {
+                    node: {
+                        source: {value: importSource},
+                        specifiers: importSpecifiers,
+                    },
+                } = path;
+
                 if (importSource !== "core-fe") {
                     return;
                 }
+
                 if (!hasImportSpecifierOfIdentifierModule(t, importSpecifiers)) {
                     return;
                 }
+
                 // We now know the TS/JS file has included `Module`, inject the code snippet
-                const programPath = path.findParent(parentPath => t.isProgram(parentPath.node));
+                const programPath = path.findParent(parentPath => t.isProgram(parentPath.node))! as babel.NodePath<babel.types.Program>;
+
                 // prettier-ignore
-                const declineWebpackHMRNode = t.ifStatement(t.memberExpression(t.identifier("module"), t.identifier("hot")), t.expressionStatement(t.callExpression(t.memberExpression(t.memberExpression(t.identifier("module"), t.identifier("hot")), t.identifier("decline")), [])));
+                const declineWebpackHMRNode = t.ifStatement(
+                    t.memberExpression(
+                        t.identifier("module"),
+                        t.identifier("hot")
+                    ),
+                    t.expressionStatement(
+                        t.callExpression(
+                            t.memberExpression(
+                                t.memberExpression(
+                                    t.identifier("module"),
+                                    t.identifier("hot"),
+                                ),
+                                t.identifier("decline"),
+                            ),
+                            [],
+                        ),
+                    ),
+                );
+
                 // Append `if (module.hot) module.hot.decline()` to end of program body
                 programPath.pushContainer("body", declineWebpackHMRNode);
+
                 // We only need to inject the code snippet once per file, mark as injected
                 state.hasInjectedDeclineWebpackHMRNode = true;
             },
         },
     };
 }
-exports.default = default_1;
+
 /**
  * @param t `babel.types`
  * @param importSpecifiers The "specifier" property of a `babel.types.ImportDeclaration` node
  * @returns true if the import declaration includes the identifier `Module`
  */
-function hasImportSpecifierOfIdentifierModule(t, importSpecifiers) {
+function hasImportSpecifierOfIdentifierModule(t: typeof babel.types, importSpecifiers: babel.types.ImportDeclaration["specifiers"]): boolean {
     const specifier = importSpecifiers.find(specifier => {
         // Check if it is one of:
         // -> `import { <IMPORT_SPECIFIER_NODE> } from "core-fe";`
@@ -48,6 +81,7 @@ function hasImportSpecifierOfIdentifierModule(t, importSpecifiers) {
             const importedSpecifier = specifier.imported;
             return t.isIdentifier(importedSpecifier) && importedSpecifier.name === "Module";
         }
+
         // Check if it is:
         // -> `import * as <IMPORT_NAMESPACE_SPECIFIER_NODE> from "core-fe";`
         if (t.isImportNamespaceSpecifier(specifier)) {
@@ -55,8 +89,8 @@ function hasImportSpecifierOfIdentifierModule(t, importSpecifiers) {
             // Maybe enforce "core-fe" should not be imported with a namespace with an ESLint rule?
             return true;
         }
+
         return false;
     });
     return specifier !== undefined;
 }
-//# sourceMappingURL=core-fe-hmr-babel-plugin.js.map

package/src/WebpackConfigGenerator/Rule/{image.rule.js → image.rule.ts}

@@ -1,7 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.imageRule = void 0;
-const RegExpUtil_1 = require("./RegExpUtil");
+import type webpack from "webpack";
+import {RegExpUtil} from "./RegExpUtil";
+
 /**
  * Handles dependency requests to image assets (".png", ".jpeg", ".jpg", ".gif", ".svg")
  * by inlining as images as DataURL,
@@ -9,9 +8,9 @@ const RegExpUtil_1 = require("./RegExpUtil");
  *
  * @see https://webpack.js.org/guides/asset-modules/
  */
-function imageRule() {
+export function imageRule(): webpack.RuleSetRule {
     return {
-        test: RegExpUtil_1.RegExpUtil.fileExtension(".png", ".jpeg", ".jpg", ".gif", ".svg"),
+        test: RegExpUtil.fileExtension(".png", ".jpeg", ".jpg", ".gif", ".svg"),
         type: "asset",
         generator: {
             filename: "static/img/[name].[hash:8][ext][query]",
@@ -23,5 +22,3 @@ function imageRule() {
         },
     };
 }
-exports.imageRule = imageRule;
-//# sourceMappingURL=image.rule.js.map

package/src/WebpackConfigGenerator/Rule/index.ts

@@ -0,0 +1,17 @@
+import {imageRule} from "./image.rule";
+import {otherRule} from "./other.rule";
+import {stylesheetRule} from "./stylesheet.rule";
+import {tsRule} from "./ts.rule";
+
+/**
+ * Static factories to create `webpack.config#modules.rules` items.
+ */
+export class Rule {
+    static readonly image = imageRule;
+
+    static readonly other = otherRule;
+
+    static readonly ts = tsRule;
+
+    static readonly stylesheet = stylesheetRule;
+}

package/src/WebpackConfigGenerator/Rule/other.rule.ts

@@ -0,0 +1,23 @@
+import type webpack from "webpack";
+import {Constant} from "../../Constant";
+import {RegExpUtil} from "./RegExpUtil";
+
+interface OtherRuleDeps {
+    extraExtensionsForOtherRule: string[];
+}
+
+/**
+ * Handles dependency requests to file assets
+ * by emitting as separate files.
+ *
+ * @see https://webpack.js.org/guides/asset-modules/
+ */
+export function otherRule({extraExtensionsForOtherRule}: OtherRuleDeps): webpack.RuleSetRule {
+    return {
+        test: RegExpUtil.fileExtension(".ico", ...Constant.mediaExtensions, ...Constant.fontExtensions, ...extraExtensionsForOtherRule),
+        type: "asset",
+        generator: {
+            filename: "static/other/[name].[hash:8][ext][query]",
+        },
+    };
+}