@atomicsmash/compiler 0.5.0 → 0.6.0

package/dist/BlocksLoader.d.ts

@@ -0,0 +1,4 @@
+import type { LoaderContext } from "webpack";
+export declare function loader(this: LoaderContext<Record<string, never>>): Promise<void>;
+export default loader;
+//# sourceMappingURL=BlocksLoader.d.ts.map

package/dist/BlocksLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlocksLoader.d.ts","sourceRoot":"","sources":["../src/BlocksLoader.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7C,wBAAsB,MAAM,CAC3B,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,iBAc1C;AAED,eAAe,MAAM,CAAC"}

package/dist/BlocksLoader.js

@@ -0,0 +1,14 @@
+import { tsImport } from "tsx/esm/api";
+export async function loader(
+// inputSourceMap?: Record<string, unknown>,
+) {
+    const callback = this.async();
+    const blockJson = await tsImport(this.resourcePath, {
+        parentURL: import.meta.url,
+        onImport: (file) => {
+            this.addDependency(file.slice(7));
+        },
+    }).then((module) => module.blockJson);
+    callback(null, JSON.stringify(blockJson));
+}
+export default loader;

package/dist/BlocksPlugin.d.ts

@@ -0,0 +1,8 @@
+import type { Compiler, WebpackPluginInstance } from "webpack";
+export declare class BlocksPlugin implements WebpackPluginInstance {
+    pluginName: string;
+    srcFolder: string;
+    constructor(srcFolder: string);
+    apply(compiler: Compiler): void;
+}
+//# sourceMappingURL=BlocksPlugin.d.ts.map

package/dist/BlocksPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlocksPlugin.d.ts","sourceRoot":"","sources":["../src/BlocksPlugin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAS/D,qBAAa,YAAa,YAAW,qBAAqB;IACzD,UAAU,SAAkB;IAC5B,SAAS,EAAE,MAAM,CAAC;gBAEN,SAAS,EAAE,MAAM;IAI7B,KAAK,CAAC,QAAQ,EAAE,QAAQ;CA4JxB"}

package/dist/BlocksPlugin.js

@@ -0,0 +1,102 @@
+import { readFile, writeFile, unlink as deleteFile } from "node:fs/promises";
+import { extname, resolve, relative, sep as pathSeparator } from "node:path";
+import glob from "fast-glob";
+import json2php from "json2php";
+import { getBlockJsonScriptFields, getBlockJsonStyleFields } from "./utils.js";
+const printer = json2php.make({ linebreak: "\n", indent: "\t" });
+export class BlocksPlugin {
+    pluginName = "BlocksPlugin";
+    srcFolder;
+    constructor(srcFolder) {
+        this.srcFolder = srcFolder;
+    }
+    apply(compiler) {
+        const { webpack: { Compilation, sources }, } = compiler;
+        compiler.hooks.thisCompilation.tap(this.pluginName, (compilation) => {
+            compilation.hooks.processAssets.tapPromise({
+                name: "CustomBlocksCSSHandler",
+                stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+            }, async (assets) => {
+                const blockJsonFiles = Object.keys(assets).filter((asset) => asset.endsWith("block.json"));
+                const PHPFiles = await glob([
+                    ...blockJsonFiles.map((blockJsonPath) => {
+                        return `${resolve(`${this.srcFolder}${pathSeparator}${blockJsonPath}`, "..", `**${pathSeparator}*.php`)}`;
+                    }),
+                ]);
+                await Promise.all(PHPFiles.map(async (file) => {
+                    return readFile(file, "utf-8").then((data) => {
+                        compilation.emitAsset(relative(this.srcFolder, file), new sources.RawSource(data), {
+                            sourceFilename: file,
+                        });
+                    });
+                }));
+            });
+        });
+        compiler.hooks.afterEmit.tapPromise(this.pluginName, async (compilation) => {
+            const blockJsonFiles = Object.keys(compilation.assets).filter((asset) => asset.endsWith("block.json"));
+            const blocksManifest = {};
+            const wordpressAssetsFilePath = `${compilation.outputOptions.path}${pathSeparator}wordpress-assets-info.json`;
+            const wordpressAssets = await readFile(wordpressAssetsFilePath, "utf-8").then((data) => {
+                return JSON.parse(data);
+            });
+            for (const blockJsonFile of blockJsonFiles) {
+                await readFile(`${compilation.outputOptions.path}${pathSeparator}${blockJsonFile}`, "utf-8")
+                    .then((data) => {
+                    return JSON.parse(data);
+                })
+                    .then(async (json) => {
+                    const blockName = blockJsonFile.replace(`${pathSeparator}block.json`, "");
+                    for (const fields of [
+                        getBlockJsonScriptFields(json),
+                        getBlockJsonStyleFields(json),
+                    ]) {
+                        if (fields === null) {
+                            continue;
+                        }
+                        for (const [fieldName, value] of Object.entries(fields)) {
+                            const values = [value].flat(1);
+                            const newValues = [];
+                            for (const srcFilePath of values) {
+                                if (!srcFilePath.startsWith("file:")) {
+                                    newValues.push(srcFilePath);
+                                    continue;
+                                }
+                                const fileName = srcFilePath
+                                    .replace("file:./", "")
+                                    .replace(extname(srcFilePath), "");
+                                const hashedAsset = Object.keys(compilation.assets).find((asset) => {
+                                    return (asset.startsWith(`${blockName}${pathSeparator}${fileName}`) && !asset.endsWith(".php"));
+                                });
+                                if (hashedAsset) {
+                                    if (hashedAsset in wordpressAssets) {
+                                        await writeFile(`${compilation.outputOptions.path}${pathSeparator}${hashedAsset.replace(extname(hashedAsset), ".asset.php")}`, `<?php return ${printer(wordpressAssets[hashedAsset])};\n`, "utf-8");
+                                    }
+                                    newValues.push(`file:./${hashedAsset.replace(`${blockName}${pathSeparator}`, "")}`);
+                                }
+                                else {
+                                    newValues.push(srcFilePath);
+                                }
+                            }
+                            json[fieldName] = newValues;
+                        }
+                    }
+                    return {
+                        blockName,
+                        newBlockJson: json,
+                    };
+                })
+                    .then(async ({ blockName, newBlockJson }) => {
+                    await writeFile(`${compilation.outputOptions.path}${pathSeparator}${blockJsonFile}`, JSON.stringify(newBlockJson, undefined, 2), "utf-8");
+                    blocksManifest[blockName] = newBlockJson;
+                });
+            }
+            const phpContent = `<?php
+// This file is generated. Do not modify it manually.
+return ${printer(blocksManifest)};
+`;
+            await writeFile(`${compilation.outputOptions.path}${pathSeparator}blocks${pathSeparator}blocks-manifest.php`, phpContent);
+            await writeFile(`${compilation.outputOptions.path}${pathSeparator}wordpress-assets-info.php`, `<?php return ${json2php(wordpressAssets)};\n`);
+            await deleteFile(wordpressAssetsFilePath);
+        });
+    }
+}

package/dist/getBlocksAssetsEntryPoints.d.ts

@@ -0,0 +1,6 @@
+import type { EntryObject } from "webpack";
+export declare function getBlocksAssetsEntryPoints(paths: string[], entryPoints: EntryObject, srcFolder: string): Promise<{
+    restOfPaths: string[];
+    entryPoints: EntryObject;
+}>;
+//# sourceMappingURL=getBlocksAssetsEntryPoints.d.ts.map

package/dist/getBlocksAssetsEntryPoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getBlocksAssetsEntryPoints.d.ts","sourceRoot":"","sources":["../src/getBlocksAssetsEntryPoints.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAK3C,wBAAsB,0BAA0B,CAC/C,KAAK,EAAE,MAAM,EAAE,EACf,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,MAAM;;;GAkDjB"}

package/dist/getBlocksAssetsEntryPoints.js

@@ -0,0 +1,50 @@
+import { relative, resolve, extname } from "node:path";
+import { tsImport } from "tsx/esm/api";
+import { getBlockJsonStyleFields, getBlockJsonScriptFields } from "./utils.js";
+export async function getBlocksAssetsEntryPoints(paths, entryPoints, srcFolder) {
+    const restOfPaths = [];
+    for (const path of paths) {
+        if (!path.endsWith("block.json.ts")) {
+            restOfPaths.push(path);
+            continue;
+        }
+        const blockJson = await tsImport(path, import.meta.url).then((module) => module.blockJson);
+        const fields = {
+            ...getBlockJsonScriptFields(blockJson),
+            ...getBlockJsonStyleFields(blockJson),
+        };
+        if (fields) {
+            for (const value of Object.values(fields).flat()) {
+                if (!value.startsWith("file:")) {
+                    continue;
+                }
+                const fileLocation = resolve(path, "../", value.slice(5));
+                const entryName = relative(srcFolder, fileLocation);
+                const type = extname(fileLocation);
+                let fileName = entryName;
+                switch (type) {
+                    case ".ts":
+                        fileName = fileName.replace(".ts", ".[contenthash].js");
+                        break;
+                    case ".tsx":
+                        fileName = fileName.replace(".tsx", ".[contenthash].js");
+                        break;
+                    case ".js":
+                        fileName = fileName.replace(".js", ".[contenthash].js");
+                        break;
+                    case ".css":
+                        fileName = fileName.replace(".css", ".[contenthash].css");
+                        break;
+                    case ".scss":
+                        fileName = fileName.replace(".scss", ".[contenthash].css");
+                        break;
+                }
+                entryPoints[entryName] = {
+                    import: resolve(path, "../", value.slice(5)),
+                    filename: fileName,
+                };
+            }
+        }
+    }
+    return { restOfPaths, entryPoints };
+}

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAsBA,OAAO,CAAC,MAAM,CAAC;IAEd,UAAU,MAAM,CAAC;QAEhB,UAAU,UAAU;YACnB,QAAQ,EAAE,YAAY,GAAG,aAAa,GAAG,MAAM,GAAG,SAAS,CAAC;SAC5D;KACD;CACD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAyBA,OAAO,CAAC,MAAM,CAAC;IAEd,UAAU,MAAM,CAAC;QAEhB,UAAU,UAAU;YACnB,QAAQ,EAAE,YAAY,GAAG,aAAa,GAAG,MAAM,GAAG,SAAS,CAAC;SAC5D;KACD;CACD"}

package/dist/index.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { sep as pathSeparator, extname, resolve as resolvePath, } from "node:path";
+import { sep as pathSeparator, extname, resolve as resolvePath, relative, } from "node:path";
 import DependencyExtractionWebpackPlugin from "@wordpress/dependency-extraction-webpack-plugin";
 import browserslistToEsbuild from "browserslist-to-esbuild";
 import CopyPlugin from "copy-webpack-plugin";
@@ -14,6 +14,8 @@ import WebpackAssetsManifest from "webpack-assets-manifest";
 import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
 import yargs from "yargs";
 import { hideBin } from "yargs/helpers";
+import { BlocksPlugin } from "./BlocksPlugin.js";
+import { getBlocksAssetsEntryPoints } from "./getBlocksAssetsEntryPoints.js";
 const argv = await yargs(hideBin(process.argv))
     .options({
     in: {
@@ -36,6 +38,16 @@ const argv = await yargs(hideBin(process.argv))
         default: false,
         describe: "See a report of the generated bundle once built.",
     },
+    experimentalBlocksSupport: {
+        boolean: true,
+        default: false,
+        describe: "Enable experimental support for WordPress blocks compilation.",
+    },
+    excludeBlocks: {
+        array: true,
+        default: ["__TEMPLATE__"],
+        describe: "A comma separated list of the folder names of blocks to exclude from compilation. Requires experimental blocks support.",
+    },
 })
     .showHelpOnFail(false, "Specify --help for available options")
     .parse();
@@ -64,10 +76,13 @@ const vueConfig = await import("vue-loader")
     .catch(() => ({ loader: [], plugin: [] }));
 const postCSSConfig = [
     [
+        // Support tailwind if package is found
         ...tailwindPostCSSPlugin,
         postCSSPresetEnv({
+            // Support all CSS that is considered stable.
             stage: 2,
             features: {
+                // Polyfill support for custom media queries
                 "custom-media-queries": true,
             },
         }),
@@ -77,64 +92,115 @@ const postCSSConfig = [
 const compiler = webpack({
     resolveLoader: {
         modules: [
+            // Get modules from project node_modules folder
             "node_modules",
+            // Get modules from this package's internal node modules folder once installed
             resolvePath(import.meta.dirname, "../", "node_modules"),
         ],
     },
+    // Add sourcemaps in dev mode
     devtool: MODE === "development" ? "source-map" : false,
+    // Set the environment mode from NODE_ENV.
     mode: MODE,
     entry: await glob([
+        ...(argv.experimentalBlocksSupport
+            ? [`${srcFolder}/blocks/**/block.json.ts`]
+            : []),
+        // Parse all direct children of the JS folder, as long as they are JS & TS files
         `${srcFolder}/js/*.{js,ts,jsx,tsx}`,
+        // Parse all direct children of the CSS folder, as long as they are CSS files
         `${srcFolder}/css/*.css`,
+        // Parse all nested children of the CSS folder, as long as they are non-partial SCSS files
         `${srcFolder}/css/**/[^_]*.s[ac]ss`,
-    ]).then((paths) => {
-        const entryPoints = {};
-        paths.forEach((path) => {
-            const entryName = path.replace(srcFolder, "").replace(extname(path), "");
+    ], {
+        ignore: argv.experimentalBlocksSupport
+            ? argv.excludeBlocks.map((blockName) => `${srcFolder}/blocks/**/${blockName}/block.json.ts`)
+            : [],
+    }).then(async (paths) => {
+        const { restOfPaths, entryPoints } = argv.experimentalBlocksSupport
+            ? await getBlocksAssetsEntryPoints(paths, {}, srcFolder)
+            : { restOfPaths: paths, entryPoints: {} };
+        restOfPaths.forEach((path) => {
+            const entryName = path.replace(srcFolder, "");
             entryPoints[entryName] = {
                 import: path,
+                // Output filenames with content hash for fingerprinting
                 filename: `${path.replace(`${srcFolder}${pathSeparator}`, "").replace(extname(path), "")}${MODE === "production" ? `.[contenthash]` : ""}.js`,
             };
         });
         return entryPoints;
     }),
     output: {
+        // Output filenames with content hash for fingerprinting
         filename: "js/[name].[contenthash].js",
+        // Clear files between runs
         clean: true,
         library: {
+            // Output JS files with Universal Module Definition
             type: "umd",
         },
+        // Set the output folder
         path: distFolder,
     },
     resolve: {
-        plugins: [new TsconfigPathsPlugin()],
+        // support TSConfig paths as aliases
+        plugins: [
+            new TsconfigPathsPlugin({
+                configFile: process.cwd() + "/tsconfig.json",
+            }),
+        ],
+        // resolve TS extensions
         extensions: [".tsx", ".ts", ".js", ".jsx"],
     },
     module: {
         rules: [
+            // Support Vue files if vue-loader is present
             ...vueConfig.loader,
+            // Use ESBuild loader to transpile JS & TS files
             {
                 test: /\.[jt]sx?$/,
                 use: {
                     loader: "esbuild-loader",
                     options: {
+                        // Set target to match the browserslist config
                         target: browserslistToEsbuild(),
+                        tsconfig: process.cwd() + "/tsconfig.json",
                     },
                 },
                 exclude: (file) => {
+                    // Exclude all block.json.ts files (handled by a separate loader).
+                    if (argv.experimentalBlocksSupport && file.includes("block.json")) {
+                        return true;
+                    }
+                    // Exclude node_modules files from transpilation unless they are vue files and the vue-loader is present
                     if (vueConfig.loader.length > 0) {
                         return file.includes("node_modules") && !file.includes(".vue.js");
                     }
                     return file.includes("node_modules");
                 },
             },
+            ...(argv.experimentalBlocksSupport
+                ? [
+                    {
+                        test: /block\.json\.ts$/,
+                        type: "asset/resource",
+                        generator: {
+                            filename: (pathData) => relative(srcFolder, pathData.filename ?? "").slice(0, -3),
+                        },
+                        use: {
+                            loader: resolvePath(import.meta.dirname, "./BlocksLoader.js"),
+                        },
+                    },
+                ]
+                : []),
+            // Transpile SCSS files and run the result through postcss
             {
                 test: /\.s[ac]ss$/i,
                 exclude: /node_modules/,
                 type: "asset/resource",
                 generator: {
                     binary: false,
-                    filename: "css/[name].[contenthash].css",
+                    filename: (pathData) => relative(srcFolder, pathData.filename ?? "").replace(".scss", ".[contenthash].css"),
                 },
                 use: [
                     {
@@ -154,13 +220,14 @@ const compiler = webpack({
                     },
                 ],
             },
+            // Run the css files through postcss
             {
                 test: /\.css$/i,
                 exclude: /node_modules/,
                 type: "asset/resource",
                 generator: {
                     binary: false,
-                    filename: "css/[name].[contenthash].css",
+                    filename: (pathData) => relative(srcFolder, pathData.filename ?? "").replace(".css", ".[contenthash].css"),
                 },
                 use: [
                     {
@@ -177,25 +244,32 @@ const compiler = webpack({
         ],
     },
     plugins: [
+        // Output progress information when compiling
         new webpack.ProgressPlugin(),
+        // Generate a manifest file of assets to make it possible to target fingerprinted files
         new WebpackAssetsManifest({
             writeToDisk: true,
             output: `${distFolder}/assets-manifest.json`,
             customize(entry) {
+                if (entry.key === "assets.php" ||
+                    entry.key === "wordpress-assets-info.php" ||
+                    entry.key.startsWith("fonts") ||
+                    entry.key.startsWith("images")) {
+                    return false;
+                }
                 if (entry.key === "spritemap.svg") {
                     return { key: "icons/sprite.svg", value: entry.value };
                 }
                 if (entry.key.startsWith("/")) {
-                    return { key: entry.key.slice(1), value: entry.value };
+                    entry.key = entry.key.slice(1);
                 }
-                if (entry.key === "assets.php" ||
-                    entry.key.startsWith("fonts") ||
-                    entry.key.startsWith("images")) {
-                    return false;
+                if (entry.key.endsWith(".js.js")) {
+                    entry.key = entry.key.slice(0, -3);
                 }
                 return entry;
             },
         }),
+        // Create an SVG sprite from a folder of provided icons
         new SVGSpritemapPlugin(`${srcFolder}/icons/*.svg`, {
             output: {
                 filename: "icons/sprite.[contenthash].svg",
@@ -207,28 +281,50 @@ const compiler = webpack({
                 },
             },
         }),
+        // Copy fonts and images from the src folder to assets (available for backwards compatibility, not recommended)
         new CopyPlugin({
             patterns: [
                 {
-                    from: `${srcFolder}/fonts`,
-                    to: "[path]fonts/[name][ext]",
+                    from: "**/*",
+                    context: resolvePath(srcFolder, "fonts"),
+                    to({ context, absoluteFilename }) {
+                        return `fonts/${relative(context, absoluteFilename ?? "")}`;
+                    },
                     noErrorOnMissing: true,
                 },
                 {
-                    from: `${srcFolder}/images`,
-                    to: "[path]images/[name][ext]",
+                    from: "**/*",
+                    context: resolvePath(srcFolder, "images"),
+                    to({ context, absoluteFilename }) {
+                        return `images/${relative(context, absoluteFilename ?? "")}`;
+                    },
                     noErrorOnMissing: true,
                 },
             ],
         }),
+        // Output a bundle analysis if flag was provided
         ...(argv.analyse ? [new BundleAnalyzerPlugin({})] : []),
+        // Extract wordpress dependencies from js files and output a wordpress assets file for enqueues
         new DependencyExtractionWebpackPlugin({
             combineAssets: true,
+            // Blocks plugin converts this to php, but it must be output as json here.
+            ...(argv.experimentalBlocksSupport
+                ? {
+                    outputFormat: "json",
+                    combinedOutputFile: "wordpress-assets-info.json",
+                }
+                : {
+                    outputFormat: "php",
+                    combinedOutputFile: "wordpress-assets-info.php",
+                }),
         }),
+        // Support Vue files if vue-loader is present
         ...vueConfig.plugin,
+        ...(argv.experimentalBlocksSupport ? [new BlocksPlugin(srcFolder)] : []),
     ],
     optimization: {
         minimizer: [
+            // Minify JS files
             new EsbuildPlugin({
                 target: browserslistToEsbuild(),
             }),

package/dist/utils.d.ts

@@ -0,0 +1,5 @@
+import type { BlockMetaData } from "@atomicsmash/blocks-helpers";
+export type BlockJson = BlockMetaData<never, never>;
+export declare function getBlockJsonScriptFields(blockJson: BlockJson): Partial<Pick<BlockJson, "viewScript" | "script" | "editorScript">> | null;
+export declare function getBlockJsonStyleFields(blockJson: BlockJson): Partial<Pick<BlockJson, "editorStyle" | "style" | "viewStyle">> | null;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAEjE,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAEpD,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,SAAS,6EAW5D;AAED,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,SAAS,0EAW3D"}

package/dist/utils.js

@@ -0,0 +1,22 @@
+export function getBlockJsonScriptFields(blockJson) {
+    const scriptFields = ["viewScript", "script", "editorScript"];
+    let result = null;
+    for (const field of scriptFields) {
+        if (Object.hasOwn(blockJson, field)) {
+            result ??= {};
+            result[field] = blockJson[field];
+        }
+    }
+    return result;
+}
+export function getBlockJsonStyleFields(blockJson) {
+    const styleFields = ["viewStyle", "style", "editorStyle"];
+    let result = null;
+    for (const field of styleFields) {
+        if (Object.hasOwn(blockJson, field)) {
+            result ??= {};
+            result[field] = blockJson[field];
+        }
+    }
+    return result;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atomicsmash/compiler",
 	"type": "module",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"description": "A universal compiler for all Atomic Smash projects.",
 	"keywords": [
 		"cli",
@@ -51,14 +51,16 @@
 		"cssnano": "^7.0.6",
 		"esbuild-loader": "^4.3.0",
 		"fast-glob": "^3.3.2",
+		"json2php": "^0.0.12",
 		"postcss": "^8.4.49",
 		"postcss-loader": "^8.1.1",
-		"postcss-preset-env": "^10.1.3",
+		"postcss-preset-env": "^10.1.5",
 		"sass": "^1.83.1",
 		"sass-loader": "^16.0.4",
 		"style-loader": "^4.0.0",
 		"svg-spritemap-webpack-plugin": "^4.7.0",
 		"tsconfig-paths-webpack-plugin": "^4.2.0",
+		"tsx": "^4.19.3",
 		"webpack": "^5.97.1",
 		"webpack-assets-manifest": "^5.2.1",
 		"webpack-bundle-analyzer": "^4.10.2",