@servicetitan/startup 31.3.2 → 31.5.0

package/src/webpack/__tests__/create-webpack-config-web-component.test.ts

@@ -196,7 +196,6 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             expect(subject().plugins).toContainEqual(
                 new HtmlWebpackPlugin({
                     title: 'ServiceTitan',
-                    hash: true,
                     templateParameters: { splitByEntry },
                     ...overrides.plugins?.HtmlWebpackPlugin,
                     inject: false,
@@ -307,6 +306,17 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                 );
             });
 
+            test('configures "externals"', () => {
+                expect(subject().externals).toEqual(
+                    Object.fromEntries(
+                        Object.entries(sharedDependencies).map(([name, value]) => [
+                            name,
+                            `${value}['${options!.name}']`,
+                        ])
+                    )
+                );
+            });
+
             describe('when package does not share design system', () => {
                 beforeEach(() => delete sharedDependencies['@servicetitan/design-system']);
 
@@ -335,6 +345,12 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                     })
                 );
             });
+
+            test('appends "/headless" to output path', () => {
+                expect(subject().output!.path).toEqual(
+                    path.join(process.cwd(), destination, 'bundle', 'headless')
+                );
+            });
         });
 
         describe.each([webpackDevConfigFileName, webpackProdConfigFileName])(
@@ -383,6 +399,14 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             test('configures "output.uniqueName"', () => {
                 expect(subject().output?.uniqueName).toEqual(options.name);
             });
+
+            describe('when headless option is set to true', () => {
+                beforeEach(() => (options.headless = true));
+
+                test('omits optimization.runtimeChunk', () => {
+                    expect(subject().optimization?.runtimeChunk).toBeUndefined();
+                });
+            });
         });
     });
 });

package/src/webpack/__tests__/create-webpack-config.test.ts

@@ -446,15 +446,6 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         itConfiguresCodeCoverage();
     });
 
-    test('configures ".css" rule to exclude .module.css files', () => {
-        const cssRule: any = subject().module?.rules?.find(({ test: regexp }: { test: RegExp }) =>
-            regexp.test('.css')
-        );
-        expect(
-            ['design-system.css', 'foo.module.css', 'foo.css'].filter(path => cssRule.exclude(path))
-        ).toEqual(['foo.module.css']);
-    });
-
     test('configures MomentLocalesPlugin plugin', () => {
         expect(subject().plugins).toContainEqual(
             new MomentLocalesPlugin({ localesToKeep: ['en-au', 'en-ca', 'en-gb'] })
@@ -473,7 +464,6 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         expect(subject().plugins).toContainEqual(
             new HtmlWebpackPlugin({
                 title: 'ServiceTitan',
-                hash: true,
                 templateParameters: { splitByEntry },
                 ...overrides.plugins?.HtmlWebpackPlugin,
             })
@@ -547,52 +537,6 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                     );
                 });
             });
-
-            describe('headless option is true', () => {
-                beforeEach(() => setOptions({ headless: true }));
-
-                test('configures "output.path"', () => {
-                    expect(subject().output!.path).toEqual(
-                        path.join(process.cwd(), destination, 'bundle', 'headless')
-                    );
-                });
-
-                describe('when mode is "production"', () => {
-                    beforeEach(() => {
-                        overrides.configuration ??= {};
-                        Object.assign(overrides.configuration, { mode: 'production' });
-                    });
-
-                    test('omits optimization.runtimeChunk', () => {
-                        expect(subject().optimization?.runtimeChunk).toBeUndefined();
-                    });
-                });
-            });
-        });
-    });
-
-    describe('when embed option is set to true', () => {
-        beforeEach(() => setOptions({ embed: true, name: packageName }));
-
-        test('configures "externals"', () => {
-            expect(subject().externals).toEqual(
-                Object.fromEntries(
-                    Object.entries(sharedDependencies).map(([name, value]) => [
-                        name,
-                        `${value}['${options!.name}']`,
-                    ])
-                )
-            );
-        });
-
-        describe('when package is web component', () => {
-            beforeEach(() => jest.mocked(isWebComponent).mockReturnValue(true));
-
-            test('configures "output.path"', () => {
-                expect(subject().output!.path).toEqual(
-                    path.join(process.cwd(), destination, 'bundle', 'light')
-                );
-            });
         });
     });
 
@@ -622,7 +566,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             expect(subject().output?.filename).toBe('[name].[contenthash].bundle.js');
         });
 
-        test('configures "output.clean"', () => {
+        test('configures "output.clean" to true', () => {
             expect(subject().output?.clean).toBe(true);
         });
 
@@ -712,4 +656,12 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             });
         });
     });
+
+    describe('with "emitExposedDependencies"', () => {
+        beforeEach(() => (options = { emitExposedDependencies: true }));
+
+        test('throws error', () => {
+            expect(subject).toThrow('package does not expose shared dependencies');
+        });
+    });
 });

package/src/webpack/configs/cache-config.ts

@@ -0,0 +1,37 @@
+import path from 'path';
+import fs from 'fs';
+import { Configuration } from 'webpack';
+import { findUp } from '../../utils';
+import { Context, Overrides } from './types';
+
+type Config = Configuration['cache'];
+type Result = Pick<Configuration, 'cache' | 'infrastructureLogging'> | undefined;
+
+const CACHE_VERSION = '1';
+
+export function cacheConfig(context: Context, _overrides: Overrides): Result {
+    const { emitExposedDependencies } = context;
+    if (!emitExposedDependencies) {
+        return;
+    }
+
+    const packageLock = findPackageLock();
+    const cache: Config = {
+        type: 'filesystem',
+        version: CACHE_VERSION,
+        ...(packageLock ? { buildDependencies: { packageLock: [packageLock] } } : {}),
+    };
+
+    return {
+        cache,
+        // Suppress "Serializing big strings impacts deserialization performance" warnings
+        infrastructureLogging: { level: 'error' },
+    };
+}
+
+function findPackageLock() {
+    return findUp(directory => {
+        const lockFile = path.resolve(path.join(directory), 'package-lock.json');
+        return fs.existsSync(lockFile) ? lockFile : undefined;
+    });
+}

package/src/webpack/configs/dev-server-config.ts

@@ -15,7 +15,7 @@ type DevServerConfig = NonNullable<Configuration['devServer']>;
 type Result = Pick<Configuration, 'devServer'> | undefined;
 
 export function devServerConfig(context: Context, overrides: Overrides): Result {
-    if (context.isProduction || isDevServerDisabled()) {
+    if (context.isProduction || context.emitExposedDependencies || isDevServerDisabled()) {
         return;
     }
 

package/src/webpack/configs/entry.config.ts

@@ -1,23 +1,33 @@
 import fs from 'fs';
 import { Configuration } from 'webpack';
 import { getModuleEntryPath } from '../utils';
+import { getDesignSystemPath } from './plugins';
 import { Context, Overrides } from './types';
 
 type Config = Configuration['entry'];
 type Result = Pick<Configuration, 'entry'>;
 
 export function entryConfig(context: Context, _: Overrides): Result {
-    const { destination, isExposeSharedDependencies, sharedDependencies, source } = context;
+    const entry: Config = context.emitExposedDependencies
+        ? getSharedEntryPoints(context)
+        : getIndexEntryPoint(context);
 
+    return { entry };
+}
+
+function getIndexEntryPoint({ source, destination }: Context): Config {
     const index = fs.existsSync(`./${source}/index.js`)
         ? `./${source}/index`
         : `./${destination}/index`;
+    return { main: [index] };
+}
 
-    const entry: Config = { main: [index] };
-
-    if (isExposeSharedDependencies) {
-        (entry.main as string[]).push(...Object.keys(sharedDependencies).map(getModuleEntryPath));
-    }
-
-    return { entry };
+function getSharedEntryPoints(context: Context): Config {
+    const { sharedDependencies } = context;
+    return {
+        shared: Object.keys(sharedDependencies).map(getModuleEntryPath),
+        ...(sharedDependencies['@servicetitan/design-system']
+            ? { 'design-system': getDesignSystemPath(context) }
+            : {}),
+    };
 }

package/src/webpack/configs/externals-config.ts

@@ -5,11 +5,12 @@ type Config = Configuration['externals'];
 type Result = Pick<Configuration, 'externals'> | undefined;
 
 export function externalsConfig(context: Context, _: Overrides): Result {
-    const { embed, name, sharedDependencies } = context;
-    if (!embed) {
+    if (!needsExternals(context)) {
         return;
     }
 
+    const { sharedDependencies } = context;
+    const name = context.name || context.packageData.name;
     const externals: Config = Object.fromEntries(
         Object.entries(sharedDependencies).map(([dependency, variable]) => [
             dependency,
@@ -19,3 +20,7 @@ export function externalsConfig(context: Context, _: Overrides): Result {
 
     return { externals };
 }
+
+function needsExternals({ embed, emitExposedDependencies, isExposeSharedDependencies }: Context) {
+    return !!embed || (isExposeSharedDependencies && !emitExposedDependencies);
+}

package/src/webpack/configs/index.ts

@@ -1,4 +1,5 @@
 export * from './amd-config';
+export * from './cache-config';
 export * from './dev-server-config';
 export * from './devtool-config';
 export * from './entry.config';

package/src/webpack/configs/optimization-config.ts

@@ -8,7 +8,7 @@ type ConfigWithCacheGroups = Config & { splitChunks: { cacheGroups: Record<strin
 type Result = Pick<Configuration, 'optimization'>;
 
 export function optimizationConfig(context: Context, _: Overrides): Result {
-    const { headless, isProduction } = context;
+    const { emitExposedDependencies, headless, isProduction } = context;
 
     const optimization: ConfigWithCacheGroups = {
         chunkIds: isProduction ? 'deterministic' : 'named',
@@ -17,7 +17,9 @@ export function optimizationConfig(context: Context, _: Overrides): Result {
         splitChunks: { cacheGroups: {} },
     };
 
-    if (!headless && isProduction) {
+    if (emitExposedDependencies) {
+        optimization.runtimeChunk = false;
+    } else if (!headless && isProduction) {
         optimization.runtimeChunk = 'single';
     }
 
@@ -58,19 +60,13 @@ function minimizeConfig(optimization: ConfigWithCacheGroups, context: Context) {
 }
 
 function sharedDependenciesConfig(optimization: ConfigWithCacheGroups, context: Context) {
-    const { headless, isExposeSharedDependencies } = context;
-    if (!isExposeSharedDependencies || headless) {
+    const { emitExposedDependencies } = context;
+    if (!emitExposedDependencies) {
         return;
     }
 
     Object.assign(optimization.splitChunks.cacheGroups, {
-        'design-system': {
-            test: /[\\/]node_modules[\\/]@servicetitan[\\/](tokens|anvil-fonts|design-system)[\\/].*\.css$/,
-            name: 'design-system',
-            chunks: 'all',
-            enforce: true,
-        },
-        'anvil2': {
+        anvil2: {
             test: /@servicetitan[\\/]anvil2[\\/].*\.css$/,
             name: 'anvil2',
             chunks: 'all',

package/src/webpack/configs/output-config.ts

@@ -1,27 +1,29 @@
 import path from 'path';
 import { Configuration } from 'webpack';
 import { Context, Overrides } from './types';
+import { getBundleType } from './utils';
 
 type Config = Configuration['output'];
 type Result = Pick<Configuration, 'output'>;
 
 export function outputConfig(context: Context, _: Overrides): Result {
-    const { destination, embed, headless, isProduction, isWebComponent, name } = context;
-
-    const bundleDir = headless ? 'headless' : embed ? 'light' : 'full';
+    const { emitExposedDependencies, isProduction, isWebComponent, name } = context;
 
     const output: Config = {
         filename: '[name].bundle.js',
-        path: isWebComponent
-            ? path.join(process.cwd(), `${destination}/bundle/${bundleDir}`)
-            : path.join(process.cwd(), `${destination}/bundle`),
+        path: getOutputPath(context),
+        ...(emitExposedDependencies ? { chunkLoadingGlobal: `sharedChunk${name}` } : {}),
     };
 
     if (isProduction) {
         const cdnPath = process.env.CLIENT_CDN_PATH;
+        const exposedDependenciesDir = getBundleType({ ...context, emitExposedDependencies: true });
         Object.assign(output, {
             filename: '[name].[contenthash].bundle.js',
-            clean: true,
+            clean:
+                exposedDependenciesDir && !emitExposedDependencies
+                    ? { keep: new RegExp(exposedDependenciesDir) }
+                    : true,
             ...(isWebComponent ? { uniqueName: name } : {}),
             ...(cdnPath ? { publicPath: cdnPath } : {}),
         });
@@ -29,3 +31,17 @@ export function outputConfig(context: Context, _: Overrides): Result {
 
     return { output };
 }
+
+function getOutputPath(context: Context) {
+    const { destination, emitExposedDependencies } = context;
+
+    const subdir = getBundleType(context) ?? '';
+    if (typeof emitExposedDependencies === 'object') {
+        const { output } = emitExposedDependencies;
+        if (output?.path) {
+            return path.join(output.path, subdir);
+        }
+    }
+
+    return path.join(process.cwd(), destination, 'bundle', subdir);
+}

package/src/webpack/configs/plugins/assets-manifest-plugin.ts

@@ -1,23 +1,32 @@
+import fs from 'fs';
+import path from 'path';
 import { WebpackAssetsManifest } from 'webpack-assets-manifest';
 import { Context, Overrides } from '../types';
 import { generateMetadata } from '../utils';
+import { readJsonSafe } from '../../../utils';
+
+interface Metadata {
+    entryPointsPath: string;
+}
+
+interface EntryPoints {
+    css: string[];
+    js: string[];
+}
 
 export function assetsManifestPlugin(context: Context, _: Overrides) {
-    if (!context.isWebComponent) {
+    if (!(context.isWebComponent || context.emitExposedDependencies)) {
         return;
     }
 
     return new WebpackAssetsManifest({
         entrypoints: true,
         output: 'entrypoints.json',
-        transform(assets) {
-            const entrypoints = assets.entrypoints as Record<
-                string,
-                { assets: Record<string, string[]> }
-            >;
-
+        transform(assets: {
+            entrypoints: Record<string, { assets: Record<string, string[]> }>;
+        }): EntryPoints {
             const getAssetsByType = (type: string) => {
-                return Object.values(entrypoints)
+                return Object.values(assets.entrypoints)
                     .map(({ assets }) => assets[type] ?? [])
                     .flat();
             };
@@ -28,8 +37,35 @@ export function assetsManifestPlugin(context: Context, _: Overrides) {
             };
         },
         // eslint-disable-next-line @typescript-eslint/require-await
-        done: async (_manifest: WebpackAssetsManifest) => {
-            generateMetadata(context);
+        done: async (manifest: WebpackAssetsManifest) => {
+            if (context.emitExposedDependencies) {
+                generateExposedDependenciesMetadata(context, manifest);
+            } else {
+                generateMetadata(context);
+            }
         },
     });
 }
+
+export function getExposedDependenciesEntryPoints(context: Context) {
+    const metadataPath = getExposedDependenciesMetadataPath(context);
+    const metadata = readJsonSafe<Metadata>(metadataPath);
+    if (metadata?.entryPointsPath) {
+        return readJsonSafe<EntryPoints>(metadata.entryPointsPath);
+    }
+}
+
+function generateExposedDependenciesMetadata(context: Context, manifest: WebpackAssetsManifest) {
+    const { destination } = context;
+    if (!fs.existsSync(destination)) {
+        fs.mkdirSync(destination, { recursive: true });
+    }
+
+    const metadataPath = getExposedDependenciesMetadataPath(context);
+    const metadata: Metadata = { entryPointsPath: manifest.getOutputPath() };
+    fs.writeFileSync(metadataPath, JSON.stringify(metadata, null, 2), 'utf-8');
+}
+
+function getExposedDependenciesMetadataPath({ destination }: Context) {
+    return path.join(destination, 'exposed-dependencies-metadata.json');
+}

package/src/webpack/configs/plugins/bundle-analyser-plugin.ts

@@ -2,6 +2,7 @@ import path from 'path';
 import os from 'os';
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 import { Context, Overrides } from '../types';
+import { getBundleType } from '../utils';
 
 export function bundleAnalyzerPlugin(context: Context, _: Overrides) {
     if (!context.buildStat) {
@@ -15,12 +16,6 @@ export function bundleAnalyzerPlugin(context: Context, _: Overrides) {
     });
 }
 
-function getBundleType({ embed, isWebComponent }: Context) {
-    if (isWebComponent) {
-        return embed ? 'light' : 'full';
-    }
-}
-
 function getReportFileName(context: Context) {
     const type = getBundleType(context);
     const qualifier = type ? `-${type}` : '';

package/src/webpack/configs/plugins/define-exposed-dependencies-plugin.ts

@@ -3,11 +3,12 @@ import { getPackageDependencyVersion } from '../../../utils';
 import { Context, Overrides } from '../types';
 
 export function defineExposedDependenciesPlugin(context: Context, _: Overrides) {
-    const { isExposeSharedDependencies, packageData, sharedDependencies } = context;
-    if (!isExposeSharedDependencies) {
+    const { emitExposedDependencies, isExposeSharedDependencies } = context;
+    if (!isExposeSharedDependencies || emitExposedDependencies) {
         return;
     }
 
+    const { packageData, sharedDependencies } = context;
     return new DefinePlugin({
         // eslint-disable-next-line @typescript-eslint/naming-convention
         EXPOSED_DEPENDENCIES: JSON.stringify(

package/src/webpack/configs/plugins/define-exposed-instance-dependencies-plugin.ts

@@ -3,8 +3,8 @@ import { Context, Overrides } from '../types';
 import { getLaunchDarklySdkVersion } from '../utils/get-launchdarkly-sdk-version';
 
 export function defineExposedInstanceDependenciesPlugin(context: Context, _: Overrides) {
-    const { isExposeSharedDependencies } = context;
-    if (!isExposeSharedDependencies) {
+    const { emitExposedDependencies, isExposeSharedDependencies } = context;
+    if (!isExposeSharedDependencies || emitExposedDependencies) {
         return;
     }
 

package/src/webpack/configs/plugins/html-plugin.ts

@@ -4,12 +4,12 @@ import { splitByEntry } from '../../utils';
 import { Context, Overrides } from '../types';
 
 export function htmlPlugin(
-    { embed, headless, isWebComponent, name }: Context,
+    { embed, emitExposedDependencies, headless, isWebComponent, name }: Context,
     { plugins }: Overrides
 ) {
     const { HtmlWebpackPlugin: htmlWebpackPluginOptions = {} } = plugins ?? {};
 
-    if (embed || headless) {
+    if (embed || headless || emitExposedDependencies) {
         return;
     }
 
@@ -17,7 +17,6 @@ export function htmlPlugin(
         deepmerge<HtmlWebpackPluginOptions>(
             {
                 title: 'ServiceTitan',
-                hash: true,
                 ...(isWebComponent
                     ? {
                           inject: false,

package/src/webpack/configs/plugins/html-tags-plugin.ts

@@ -0,0 +1,28 @@
+import HtmlWebpackTagsPlugin from 'html-webpack-tags-plugin';
+import { Context, Overrides } from '../types';
+import { getBundleType } from '../utils';
+import { getExposedDependenciesEntryPoints } from './assets-manifest-plugin';
+
+export function htmlTagsPlugin(context: Context, _overrides: Overrides) {
+    const { emitExposedDependencies, isExposeSharedDependencies } = context;
+    if (!isExposeSharedDependencies || emitExposedDependencies) {
+        return;
+    }
+
+    const sharedEntryPoints = getSharedEntryPoints(context);
+    if (!sharedEntryPoints.length) {
+        return;
+    }
+
+    return new HtmlWebpackTagsPlugin({ tags: sharedEntryPoints, append: false });
+}
+
+function getSharedEntryPoints(context: Context) {
+    const dirname = getBundleType({ ...context, emitExposedDependencies: true });
+    if (!dirname) {
+        return [];
+    }
+
+    const { css = [], js = [] } = getExposedDependenciesEntryPoints(context) ?? {};
+    return [...css, ...js].map(name => `${dirname}/${name}`);
+}

package/src/webpack/configs/plugins/index.ts

@@ -5,8 +5,10 @@ export * from './define-exposed-instance-dependencies-plugin';
 export * from './define-web-component-name-plugin';
 export * from './filter-warnings-plugin';
 export * from './html-plugin';
+export * from './html-tags-plugin';
 export * from './ignore-plugin';
 export * from './mini-css-extract-plugin';
 export * from './moment-locales-plugin';
+export * from './remove-empty-scripts-plugin';
 export * from './virtual-modules-plugin';
 export * from './watch-run-plugin';

package/src/webpack/configs/plugins/remove-empty-scripts-plugin.ts

@@ -0,0 +1,11 @@
+import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts';
+import { Context, Overrides } from '../types';
+
+export function removeEmptyScriptsPlugin(context: Context, _overrides: Overrides) {
+    const { emitExposedDependencies } = context;
+    if (!emitExposedDependencies) {
+        return;
+    }
+
+    return new RemoveEmptyScriptsPlugin();
+}

package/src/webpack/configs/plugins/virtual-modules-plugin.ts

@@ -4,25 +4,27 @@ import VirtualModulesPlugin from 'webpack-virtual-modules';
 import { Context, Overrides } from '../types';
 
 export function virtualModulesPlugin(context: Context, _: Overrides) {
-    if (!context.isWebComponent) {
-        return;
-    }
-
     const { destination } = context;
 
-    const indexPath = path.join(process.cwd(), `${destination}/index`);
-    const modules: ConstructorParameters<typeof VirtualModulesPlugin>[0] = {
-        [indexPath]: indexCode(context),
-    };
+    const modules: ConstructorParameters<typeof VirtualModulesPlugin>[0] = {};
+
+    if (context.isWebComponent) {
+        const indexPath = path.join(process.cwd(), destination, 'index');
+        modules[indexPath] = indexCode(context);
+    }
 
     if (needsToIncludeDesignSystem(context)) {
-        const designSystemPath = path.join(process.cwd(), `${destination}/design-system.css`);
+        const designSystemPath = getDesignSystemPath(context);
         if (!fs.existsSync(designSystemPath)) {
             modules[designSystemPath] = designSystemCode();
         }
     }
 
-    return new VirtualModulesPlugin(modules);
+    return Object.keys(modules).length ? new VirtualModulesPlugin(modules) : undefined;
+}
+
+export function getDesignSystemPath({ destination }: Context) {
+    return path.join(process.cwd(), destination, 'design-system.css');
 }
 
 function designSystemCode() {
@@ -50,13 +52,22 @@ function indexCode(context: Context) {
     ].join('\n');
 }
 
-function needsToIncludeDesignSystem({ embed, headless, packageData, sharedDependencies }: Context) {
+function needsToIncludeDesignSystem({
+    embed,
+    emitExposedDependencies,
+    headless,
+    isWebComponent,
+    packageData,
+    sharedDependencies,
+}: Context) {
     return (
-        !headless &&
-        // Depends on design system
-        !!packageData.dependencies['@servicetitan/design-system'] &&
-        // ... and is not light bundle with private copy of design system
-        !(embed && !!sharedDependencies['@servicetitan/design-system'])
+        (!!emitExposedDependencies && !!sharedDependencies['@servicetitan/design-system']) ||
+        (isWebComponent &&
+            !headless &&
+            // Depends on design system
+            !!packageData.dependencies['@servicetitan/design-system'] &&
+            // ... and is not light bundle with private copy of design system
+            !(embed && !!sharedDependencies['@servicetitan/design-system']))
     );
 }
 

package/src/webpack/configs/plugins-config.ts

@@ -7,9 +7,11 @@ import {
     defineWebComponentNamePlugin,
     filterWarningsPlugin,
     htmlPlugin,
+    htmlTagsPlugin,
     ignorePlugin,
     miniCssExtractPlugin,
     momentLocalesPlugin,
+    removeEmptyScriptsPlugin,
     virtualModulesPlugin,
     watchRunPlugin,
 } from './plugins';
@@ -27,9 +29,11 @@ export function pluginsConfig(context: Context, overrides: Overrides): Result {
         defineWebComponentNamePlugin,
         filterWarningsPlugin,
         htmlPlugin,
+        htmlTagsPlugin,
         ignorePlugin,
         miniCssExtractPlugin,
         momentLocalesPlugin,
+        removeEmptyScriptsPlugin,
         virtualModulesPlugin,
         watchRunPlugin,
     ]