@pinnacle0/webpack-util 0.3.23 → 0.3.26

package/src/WebpackConfigGenerator/index.ts

@@ -0,0 +1,213 @@
+import {Utility} from "@pinnacle0/devtool-util";
+import path from "path";
+import type webpack from "webpack";
+import {Constant} from "../Constant";
+import {CoreUtil} from "../CoreUtil";
+import type {EntryDescriptor, WebpackConfigGeneratorOptions} from "../type";
+import {ConfigEntryDescriptorsFactory} from "./ConfigEntryDescriptorsFactory";
+import {HTMLWebpackPluginsFactory} from "./HTMLWebpackPluginsFactory";
+import {WebpackConfigSerializationUtil} from "./WebpackConfigSerializationUtil";
+import {WebpackEntryFactory} from "./WebpackEntryFactory";
+import {WebpackOutputPublicURLFactory} from "./WebpackOutputPublicURLFactory";
+import {WebpackResolveAliasFactory} from "./WebpackResolveAliasFactory";
+import {WebpackResolveExtensionsFactory} from "./WebpackResolveExtensionsFactory";
+import {WebpackResolveModulesFactory} from "./WebpackResolveModulesFactory";
+import {Plugin} from "./Plugin";
+import {Rule} from "./Rule";
+
+/**
+ * Generates a webpack config with sane defaults.
+ */
+export class WebpackConfigGenerator {
+    private readonly env: string | null;
+    private readonly projectDirectory: string;
+    private readonly projectSrcDirectory: string;
+    private readonly tsconfigFilepath: string;
+    private readonly enableProfiling: boolean;
+    private readonly maxEntryPointKiloByte: number;
+    private readonly maxAssetKiloByte: number;
+    private readonly isFastMode: boolean;
+    private readonly verbose: boolean;
+    private readonly defineVars: {[key: string]: string};
+    private readonly extraExtensionsForOtherRule: string[];
+
+    private readonly configEntryDescriptors: EntryDescriptor[];
+    private readonly entry: NonNullable<webpack.Configuration["entry"]>;
+    private readonly htmlWebpackPluginInstances: NonNullable<webpack.Configuration["plugins"]>;
+    private readonly resolveExtensions: NonNullable<NonNullable<webpack.Configuration["resolve"]>["extensions"]>;
+    private readonly resolveModules: NonNullable<NonNullable<webpack.Configuration["resolve"]>["modules"]>;
+    private readonly resolveAliases: NonNullable<NonNullable<webpack.Configuration["resolve"]>["alias"]>;
+    private readonly outputPublicPath: string;
+
+    private readonly logger = Utility.createConsoleLogger("WebpackConfigGenerator");
+
+    constructor(private readonly options: WebpackConfigGeneratorOptions) {
+        this.env = CoreUtil.currentEnv();
+        this.projectDirectory = options.projectDirectory;
+        this.projectSrcDirectory = path.join(options.projectDirectory, "src");
+        this.tsconfigFilepath = path.join(options.projectDirectory, "tsconfig.json");
+
+        this.enableProfiling = CoreUtil.profilingEnabled();
+        this.isFastMode = CoreUtil.isFastMode();
+        this.maxEntryPointKiloByte = options.maxEntryPointKiloByte ?? Constant.maxEntryPointKiloByte;
+        this.maxAssetKiloByte = options.maxAssetKiloByte ?? Constant.maxAssetKiloByte;
+        this.verbose = options.verbose || false;
+        this.defineVars = options.defineVars || {};
+        this.extraExtensionsForOtherRule = options.extraExtensionsForOtherRule || [];
+
+        this.configEntryDescriptors = ConfigEntryDescriptorsFactory.generate({
+            indexName: options.indexName || "index",
+            projectSrcDirectory: this.projectSrcDirectory,
+            extraEntries: options.extraEntries || {},
+        });
+        this.entry = WebpackEntryFactory.generate({
+            configEntryDescriptors: this.configEntryDescriptors,
+        });
+        this.htmlWebpackPluginInstances = HTMLWebpackPluginsFactory.generate({
+            configEntryDescriptors: this.configEntryDescriptors,
+        });
+        this.outputPublicPath = WebpackOutputPublicURLFactory.generate({
+            env: this.env,
+            webpackPublicPath: options.webpackPublicPath,
+        });
+        this.resolveExtensions = WebpackResolveExtensionsFactory.generate({
+            prioritizedExtensionPrefixes: options.prioritizedExtensionPrefixes,
+        });
+        this.resolveModules = WebpackResolveModulesFactory.generate({
+            projectSrcDirectory: this.projectSrcDirectory,
+        });
+        this.resolveAliases = WebpackResolveAliasFactory.generate({
+            env: this.env,
+            resolvers: options.dynamicPathResolvers ?? [],
+        });
+
+        this.logger.info("Config constructed:");
+        for (const info of [
+            `-- Code Checking: ${this.isFastMode ? "Minimal Check" : "Default"}`,
+            `-- Env: ${this.env || "[N/A]"}`,
+            `-- Src Directory: ${this.projectSrcDirectory}`,
+            `-- HTML Entries: ${Object.keys(this.entry).join(" / ")}`,
+            `-- Webpack Public URL: ${this.outputPublicPath}`,
+            `-- Dynamic Aliases: ${JSON.stringify(this.resolveAliases, null, 4)}`,
+            `-- Use Cache: ${this.env === null}`,
+        ]) {
+            console.info(info);
+        }
+    }
+
+    development(): webpack.Configuration {
+        const config: webpack.Configuration = {
+            mode: "development",
+            entry: this.entry,
+            target: "web", // https://github.com/webpack/webpack-dev-server/issues/2758 Hot-reload will break if we provide list to target
+            output: {
+                filename: "static/js/[name].js",
+                publicPath: "/",
+            },
+            resolve: {
+                extensions: this.resolveExtensions,
+                modules: this.resolveModules,
+                alias: this.resolveAliases,
+            },
+            devtool: "inline-cheap-module-source-map",
+            optimization: {
+                usedExports: true,
+                splitChunks: {
+                    automaticNameDelimiter: "-",
+                    maxAsyncRequests: 30,
+                },
+            },
+            module: {
+                rules: [
+                    Rule.ts({tsconfigFilepath: this.tsconfigFilepath, fastRefresh: true}),
+                    Rule.stylesheet({minimize: false}),
+                    Rule.image(),
+                    Rule.other({extraExtensionsForOtherRule: this.extraExtensionsForOtherRule}),
+                    // prettier-format-preserve
+                ],
+            },
+            plugins: [
+                ...this.htmlWebpackPluginInstances,
+                Plugin.ignoreMomentLocale(),
+                Plugin.reactRefresh(),
+                Plugin.webpack.progress({enableProfiling: false}),
+                Plugin.webpack.define(this.defineVars),
+                // prettier-format-preserve
+            ],
+            cache:
+                this.env === null
+                    ? {
+                          type: "filesystem",
+                          cacheDirectory: path.join(this.projectDirectory, ".webpack-cache"),
+                      }
+                    : false,
+        };
+        if (this.verbose || CoreUtil.verbose()) {
+            this.logger.info("Full webpack config:");
+            console.info(WebpackConfigSerializationUtil.configToString(config));
+        }
+        return config;
+    }
+
+    production(outputDirectory: string): webpack.Configuration {
+        const config: webpack.Configuration = {
+            mode: "production",
+            entry: this.entry,
+            target: ["web", "es5"],
+            output: {
+                path: outputDirectory,
+                filename: this.enableProfiling ? "static/js/[name].js" : pathInfo => this.configEntryDescriptors.find(_ => _.name === pathInfo.chunk!.name)!.outputFilename,
+                chunkFilename: this.enableProfiling ? "static/js/[id].[name].js" : "static/js/[id].[chunkhash:8].js",
+                publicPath: this.outputPublicPath,
+                crossOriginLoading: "anonymous",
+            },
+            resolve: {
+                extensions: this.resolveExtensions,
+                modules: this.resolveModules,
+                alias: this.resolveAliases,
+            },
+            bail: true,
+            optimization: {
+                splitChunks: {
+                    automaticNameDelimiter: "-",
+                    maxAsyncRequests: 30,
+                },
+                minimizer: [
+                    Plugin.minimizer.terser({sourceMap: true}),
+                    Plugin.minimizer.css(),
+                    // prettier-format-preserve
+                ],
+            },
+            performance: {
+                maxEntrypointSize: this.enableProfiling ? Number.MAX_SAFE_INTEGER : this.maxEntryPointKiloByte * 1000,
+                maxAssetSize: this.maxAssetKiloByte * 1000,
+                assetFilter: (filename: string) => Constant.mediaExtensions.concat(this.extraExtensionsForOtherRule).every(_ => !filename.endsWith(_)),
+            },
+            module: {
+                rules: [
+                    Rule.ts({tsconfigFilepath: this.tsconfigFilepath, fastRefresh: false}),
+                    Rule.stylesheet({minimize: true}),
+                    Rule.image(),
+                    Rule.other({extraExtensionsForOtherRule: this.extraExtensionsForOtherRule}),
+                    // prettier-format-preserve
+                ],
+            },
+            plugins: [
+                ...this.htmlWebpackPluginInstances,
+                Plugin.scriptTagCrossOriginPlugin(),
+                Plugin.ignoreMomentLocale(),
+                Plugin.fileOutput.miniCssExtract({enableProfiling: this.enableProfiling}),
+                ...(this.enableProfiling ? [Plugin.webpack.progress({enableProfiling: true})] : []), // disable to not bloat up CI logs
+                Plugin.webpack.define(this.defineVars),
+                // prettier-format-preserve
+            ],
+        };
+        if (this.verbose || CoreUtil.verbose()) {
+            this.logger.info("Full webpack config:");
+            console.info(WebpackConfigSerializationUtil.configToString(config));
+        }
+        return config;
+    }
+}
+
+export type {WebpackConfigGeneratorOptions};

package/src/WebpackServerStarter.ts

@@ -0,0 +1,138 @@
+import {Utility} from "@pinnacle0/devtool-util";
+import path from "path";
+import webpack from "webpack";
+import DevServer from "webpack-dev-server";
+import type {Application as ExpressApplication} from "express";
+import type {WebpackConfigGeneratorOptions} from "./WebpackConfigGenerator";
+import {WebpackConfigGenerator} from "./WebpackConfigGenerator";
+import type WebpackDevServer from "webpack-dev-server";
+
+export interface WebpackServerStarterOptions
+    extends Pick<
+        WebpackConfigGeneratorOptions,
+        // prettier-reserve
+        "projectDirectory" | "dynamicPathResolvers" | "extraEntries" | "prioritizedExtensionPrefixes" | "defineVars" | "extraExtensionsForOtherRule"
+    > {
+    port: number;
+    apiProxy?: {
+        target: string;
+        context: string[];
+    };
+    interceptExpressApp?: (app: ExpressApplication) => void;
+}
+
+/**
+ * Start webpack dev server, by creating WebpackServerStarter instance and then run.
+ *
+ ***************************************
+ *
+ * Add "--env envName" to command line, if you want to switch config folder dynamically.
+ */
+
+export class WebpackServerStarter {
+    private readonly devServerConfigContentBase: string;
+    private readonly onBeforeSetupMiddleware: WebpackDevServer.Configuration["onBeforeSetupMiddleware"];
+    private readonly port: number;
+    private readonly apiProxy:
+        | {
+              target: string;
+              context: string[];
+              secure: boolean;
+              changeOrigin: boolean;
+          }[]
+        | undefined;
+    private readonly logger = Utility.createConsoleLogger("WebpackServerStarter");
+    private readonly webpackConfig: webpack.Configuration;
+
+    constructor({
+        projectDirectory,
+        port,
+        apiProxy,
+        interceptExpressApp,
+        dynamicPathResolvers,
+        extraEntries,
+        prioritizedExtensionPrefixes,
+        defineVars,
+        extraExtensionsForOtherRule,
+    }: WebpackServerStarterOptions) {
+        this.devServerConfigContentBase = path.join(projectDirectory, "static");
+        this.port = port;
+        this.apiProxy = apiProxy
+            ? [
+                  {
+                      context: apiProxy.context,
+                      target: apiProxy.target,
+                      secure: false,
+                      changeOrigin: true,
+                  },
+              ]
+            : undefined;
+        this.onBeforeSetupMiddleware = interceptExpressApp ? devServer => (devServer.app ? interceptExpressApp(devServer.app) : undefined) : undefined;
+        this.webpackConfig = new WebpackConfigGenerator({
+            projectDirectory,
+            dynamicPathResolvers,
+            extraEntries,
+            prioritizedExtensionPrefixes,
+            defineVars,
+            extraExtensionsForOtherRule,
+        }).development();
+    }
+
+    async run() {
+        try {
+            this.logger.info(["Starting dev server on port", String(this.port)]);
+            const server = this.createDevServerInstance();
+            const signals: NodeJS.Signals[] = ["SIGINT", "SIGTERM"];
+            for (const signal of signals) {
+                process.on(signal, () => {
+                    // force stop webpack dev server
+                    server.stopCallback(() => {});
+                    process.exit();
+                });
+            }
+            await server.start();
+        } catch (e) {
+            this.logger.error(e);
+            console.error(e);
+            process.exit(1);
+        }
+    }
+
+    private createDevServerInstance() {
+        return new DevServer(
+            {
+                host: "0.0.0.0",
+                port: this.port,
+                static: {
+                    directory: this.devServerConfigContentBase,
+                },
+                historyApiFallback: true,
+                server: {
+                    type: "https",
+                },
+                compress: true,
+                hot: true,
+                client: {
+                    overlay: {
+                        errors: true,
+                    },
+                },
+                onBeforeSetupMiddleware: this.onBeforeSetupMiddleware,
+                devMiddleware: {
+                    stats: {
+                        colors: true,
+                        // https://github.com/webpack/webpack/blob/b65d060040a26255cbf6f50350fef4d4ffcce4d7/lib/stats/DefaultStatsPresetPlugin.js#L96-L103
+                        all: false,
+                        errors: true,
+                        errorsCount: true,
+                        warnings: true,
+                        warningsCount: true,
+                        logging: "warn",
+                    },
+                },
+                proxy: this.apiProxy,
+            },
+            webpack(this.webpackConfig)
+        );
+    }
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+import {WebpackBuilder} from "./WebpackBuilder";
+import {WebpackServerStarter} from "./WebpackServerStarter";
+import {CoreUtil} from "./CoreUtil";
+
+export const WebpackUtil = Object.freeze({
+    Builder: WebpackBuilder,
+    ServerStarter: WebpackServerStarter,
+    ...CoreUtil,
+});

package/src/{type.d.ts → type.ts}

@@ -1,4 +1,5 @@
 import type webpack from "webpack";
+
 export interface WebpackConfigGeneratorOptions {
     /**
      * Directory of containing the application code.
@@ -88,12 +89,11 @@ export interface WebpackConfigGeneratorOptions {
     /**
      * Ref: https://webpack.js.org/plugins/define-plugin/
      */
-    defineVars?: {
-        [key: string]: string;
-    } | undefined;
+    defineVars?: {[key: string]: string} | undefined;
     onSuccess?: () => void;
     extraExtensionsForOtherRule?: string[] | undefined;
 }
+
 export interface EntryDescriptor {
     name: string;
     /**
@@ -114,6 +114,7 @@ export interface EntryDescriptor {
      */
     htmlPath?: string;
 }
+
 /**
  * Same as EntryDescriptor, but guaranteed to have an htmlPath.
  * Used for creating HTMLWebpackPlugin instances.
@@ -124,6 +125,7 @@ export interface HTMLEntryDescriptor {
     entryPath: string;
     htmlPath: string;
 }
+
 export interface DynamicPathResolver {
     /**
      * Prefix of the dependencies that should be aliased.
@@ -142,6 +144,7 @@ export interface DynamicPathResolver {
      */
     resolver: string | null | ((env: string | null) => string | null);
 }
+
 export interface InternalCheckerOptions {
     /**
      * Directory of containing the application code.
@@ -160,6 +163,7 @@ export interface InternalCheckerOptions {
      */
     extraCheckDirectories?: string[];
 }
+
 declare module "webpack" {
     interface TapablePlugin {
         apply(...args: any[]): void;
@@ -176,7 +180,7 @@ declare module "webpack" {
      * This is a workaround to allow "@types/*-plugin" packages to work before their
      * type definitions are properly upgraded.
      */
-    abstract class Plugin {
+    export abstract class Plugin {
         apply(compiler: webpack.Compiler): void;
     }
 }

package/test/WebpackConfigGenerator/Rule/core-fe-hmr-babel-plugin/__snapshots__/shouldIgnore.test.ts.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`core-fe-hmr-babel-plugin sanity test for some react component files 1`] = `
+"import React from \\"react\\";
+import { ReactUtil } from \\"@pinnacle0/util\\";
+export const Main = ReactUtil.memo(\\"Main\\", () => {
+  return React.createElement(\\"div\\", {});
+});"
+`;
+
+exports[`core-fe-hmr-babel-plugin should ignore when non core-fe source files 1`] = `
+"import { Module } from \\"not-core-fe\\";
+import { Main } from \\"./component/Main\\";
+const initialState = {};
+
+class FeatureModule extends Module {}
+
+const featureModule = register(new FeatureModule(\\"feature\\", initialState));
+export const actions = featureModule.getActions();
+export const MainComponent = featureModule.attachLifecycle(Main);"
+`;

package/test/WebpackConfigGenerator/Rule/core-fe-hmr-babel-plugin/__snapshots__/shouldTransform.test.ts.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`core-fe-hmr-babel-plugin works with \`import * as CoreFENamespace\` 1`] = `
+"import * as CoreFENamespace from \\"core-fe\\";
+import { Main } from \\"./component/Main\\";
+const initialState = {};
+
+class FeatureModule extends CoreFENamespace.Module {}
+
+const featureModule = register(new FeatureModule(\\"feature\\", initialState));
+export const actions = featureModule.getActions();
+export const MainComponent = featureModule.attachLifecycle(Main);
+if (module.hot) module.hot.decline();"
+`;
+
+exports[`core-fe-hmr-babel-plugin works with \`import {Module as CoreFEModule}\` 1`] = `
+"import { Module as CoreFEModule } from \\"core-fe\\";
+import { Main } from \\"./component/Main\\";
+const initialState = {};
+
+class FeatureModule extends CoreFEModule {}
+
+const featureModule = register(new FeatureModule(\\"feature\\", initialState));
+export const actions = featureModule.getActions();
+export const MainComponent = featureModule.attachLifecycle(Main);
+if (module.hot) module.hot.decline();"
+`;
+
+exports[`core-fe-hmr-babel-plugin works with \`import {Module}\` 1`] = `
+"import { Module } from \\"core-fe\\";
+import { Main } from \\"./component/Main\\";
+const initialState = {};
+
+class FeatureModule extends Module {}
+
+const featureModule = register(new FeatureModule(\\"feature\\", initialState));
+export const actions = featureModule.getActions();
+export const MainComponent = featureModule.attachLifecycle(Main);
+if (module.hot) module.hot.decline();"
+`;
+
+exports[`core-fe-hmr-babel-plugin works with \`import CoreFEDefault, {Module}\` 1`] = `
+"import CoreFEDefault, { Module } from \\"core-fe\\";
+import { Main } from \\"./component/Main\\";
+const initialState = {};
+
+class FeatureModule extends Module {}
+
+const featureModule = register(new FeatureModule(\\"feature\\", initialState));
+export const actions = featureModule.getActions();
+export const MainComponent = featureModule.attachLifecycle(Main);
+if (module.hot) module.hot.decline();"
+`;

package/test/WebpackConfigGenerator/Rule/core-fe-hmr-babel-plugin/shouldIgnore.test.ts

@@ -0,0 +1,36 @@
+import * as babel from "@babel/core";
+import plugin from "@pinnacle0/webpack-util/src/WebpackConfigGenerator/Rule/core-fe-hmr-babel-plugin";
+
+describe("core-fe-hmr-babel-plugin", () => {
+    test("should ignore when non core-fe source files", () => {
+        const source = `
+            import {Module} from "not-core-fe";
+            import {Main} from "./component/Main";
+
+            const initialState = {};
+            class FeatureModule extends Module {}
+
+            const featureModule = register(new FeatureModule("feature", initialState));
+            export const actions = featureModule.getActions();
+            export const MainComponent = featureModule.attachLifecycle(Main);
+        `;
+        const {code} = babel.transformSync(source, {plugins: [plugin]})!;
+        expect(code).toMatchSnapshot();
+        expect(code).not.toContain("if (module.hot) module.hot.decline();");
+    });
+
+    test("sanity test for some react component files", () => {
+        const source = `
+            import React from "react";
+            import {ReactUtil} from "@pinnacle0/util";
+
+            export const Main = ReactUtil.memo("Main", () => {
+                return React.createElement("div", {});
+            });
+        `;
+        const {code} = babel.transformSync(source, {plugins: [plugin]})!;
+
+        expect(code).toMatchSnapshot();
+        expect(code).not.toContain("if (module.hot) module.hot.decline();");
+    });
+});

package/test/WebpackConfigGenerator/Rule/core-fe-hmr-babel-plugin/shouldTransform.test.ts

@@ -0,0 +1,72 @@
+import * as babel from "@babel/core";
+import plugin from "@pinnacle0/webpack-util/src/WebpackConfigGenerator/Rule/core-fe-hmr-babel-plugin";
+
+describe("core-fe-hmr-babel-plugin", () => {
+    test("works with `import {Module}`", () => {
+        const source = `
+            import {Module} from "core-fe";
+            import {Main} from "./component/Main";
+
+            const initialState = {};
+            class FeatureModule extends Module {}
+
+            const featureModule = register(new FeatureModule("feature", initialState));
+            export const actions = featureModule.getActions();
+            export const MainComponent = featureModule.attachLifecycle(Main);
+        `;
+        const {code} = babel.transformSync(source, {plugins: [plugin]})!;
+        expect(code).toMatchSnapshot();
+        expect(code).toContain("if (module.hot) module.hot.decline();");
+    });
+
+    test("works with `import {Module as CoreFEModule}`", () => {
+        const source = `
+            import {Module as CoreFEModule} from "core-fe";
+            import {Main} from "./component/Main";
+
+            const initialState = {};
+            class FeatureModule extends CoreFEModule {}
+
+            const featureModule = register(new FeatureModule("feature", initialState));
+            export const actions = featureModule.getActions();
+            export const MainComponent = featureModule.attachLifecycle(Main);
+        `;
+        const {code} = babel.transformSync(source, {plugins: [plugin]})!;
+        expect(code).toMatchSnapshot();
+        expect(code).toContain("if (module.hot) module.hot.decline();");
+    });
+
+    test("works with `import CoreFEDefault, {Module}`", () => {
+        const source = `
+            import CoreFEDefault, {Module} from "core-fe";
+            import {Main} from "./component/Main";
+
+            const initialState = {};
+            class FeatureModule extends Module {}
+
+            const featureModule = register(new FeatureModule("feature", initialState));
+            export const actions = featureModule.getActions();
+            export const MainComponent = featureModule.attachLifecycle(Main);
+        `;
+        const {code} = babel.transformSync(source, {plugins: [plugin]})!;
+        expect(code).toMatchSnapshot();
+        expect(code).toContain("if (module.hot) module.hot.decline();");
+    });
+
+    test("works with `import * as CoreFENamespace`", () => {
+        const source = `
+            import * as CoreFENamespace from "core-fe";
+            import {Main} from "./component/Main";
+
+            const initialState = {};
+            class FeatureModule extends CoreFENamespace.Module {}
+
+            const featureModule = register(new FeatureModule("feature", initialState));
+            export const actions = featureModule.getActions();
+            export const MainComponent = featureModule.attachLifecycle(Main);
+        `;
+        const {code} = babel.transformSync(source, {plugins: [plugin]})!;
+        expect(code).toMatchSnapshot();
+        expect(code).toContain("if (module.hot) module.hot.decline();");
+    });
+});

package/test/WebpackConfigGenerator/plugin/fixture/script.js

@@ -0,0 +1,2 @@
+const {a} = require("./script1");
+console.info(a);

package/test/WebpackConfigGenerator/plugin/fixture/script1.js

@@ -0,0 +1 @@
+module.exports = {a: "123"};

package/test/WebpackConfigGenerator/plugin/script-tag-crossorigin-plugin.test.ts

@@ -0,0 +1,58 @@
+import path from "path";
+import fs from "fs";
+import webpack from "webpack";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import {ScriptTagCrossOriginPlugin} from "../../../src/WebpackConfigGenerator/Plugin/script-tag-crossorigin-plugin";
+
+const OUTPUT_DIR = path.join(__dirname, "./dist");
+type Entry = Omit<webpack.Configuration["entry"], "undefined">;
+const createConfig = (entry: Entry): webpack.Configuration => ({
+    mode: "production",
+    entry,
+    output: {
+        path: OUTPUT_DIR,
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            filename: "index.html",
+        }),
+        new ScriptTagCrossOriginPlugin(),
+    ],
+});
+
+describe("script-tag-crossorigin-plugin test: Add crossorigin='anonymous'", () => {
+    beforeEach(done => {
+        fs.rmSync(OUTPUT_DIR, {force: true, recursive: true});
+        done();
+    });
+
+    const testPlugin = (entry: Entry, expectedResult: RegExp, done: () => void) => {
+        const config: webpack.Configuration = createConfig(entry);
+        webpack(config, error => {
+            expect(error).toBeFalsy();
+            const outputFile = fs.readFileSync(path.join(OUTPUT_DIR, "index.html"));
+            expect(outputFile.toString()).toMatch(expectedResult);
+            done();
+        });
+    };
+
+    test("single entry script tag", done => {
+        testPlugin(
+            {
+                main: path.join(__dirname, "./fixture/script.js"),
+            },
+            new RegExp('<script.+src.+\\main.js.+crossorigin="anonymous"', "gm"),
+            done
+        );
+    });
+    test("multiple entry script tag", done => {
+        testPlugin(
+            {
+                main: path.join(__dirname, "./fixture/script.js"),
+                second: path.join(__dirname, "./fixture/script.js"),
+            },
+            new RegExp('<script.+src.+\\main.js.+crossorigin="anonymous".*>.+<script.+src.+second\\.js.+crossorigin="anonymous"', "gm"),
+            done
+        );
+    });
+});

package/test/test-project/package.json

@@ -0,0 +1,5 @@
+{
+    "name": "@pinnacle0/webpack-util-test-project",
+    "license": "UNLICENSED",
+    "private": true
+}