chore(webpack): optimize webpack files (#2007)

* Optimize webpack files

* upgrade webpack config files to ECMA script

* Delete webpack-common.js

* fix incorrect extraction of docs.css for stacks docs

---------

Co-authored-by: Giamir Buoncristiani <[email protected]>

Author: ttaylor-stack

packages/stacks-classic/webpack.config.js

@@ -0,0 +1,90 @@
+import path from "path"
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import cssnano from 'cssnano'
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const tsRule = (configFile) => ({
+    test: /\.tsx?$/,
+    exclude: /node_modules/,
+    use: [
+        {
+            loader: "ts-loader",
+            options: configFile ? { configFile } : {},
+        },
+    ],
+});
+
+const lessRule = (minify = false) => ({
+    test: /\.less$/,
+    use: [
+        MiniCssExtractPlugin.loader,
+        {
+            loader: "css-loader",
+            options: {
+                importLoaders: 1,
+                url: false,
+            },
+        },
+        {
+            loader: "postcss-loader",
+            options: {
+                postcssOptions: {
+                    plugins: minify ? [cssnano] : [],
+                },
+            },
+        },
+        "less-loader",
+    ],
+});
+
+const commonResolve = {
+    extensions: [".tsx", ".ts", ".js"],
+};
+
+const baseConfig = (isProd, minify) => ({
+    name: "stacks" + (minify ? ".min" : ""),
+    // run the minified bundle first, then the unminified bundle
+    dependencies: minify ? [] : ["stacks.min"],
+    mode: isProd ? "production" : "development",
+    devtool: isProd ? false : "inline-source-map",
+    entry: {
+        // add .min to the file names of minified bundles
+        [minify ? "stacks.min" : "stacks"]: path.resolve(
+            __dirname,
+            "lib/index.ts"
+        ),
+    },
+    output: {
+        filename: `js/[name].js`,
+        path: path.resolve(__dirname, "dist"),
+        // don't empty out the dist folder when running the second build
+        clean: minify,
+        compareBeforeEmit: true,
+        library: "Stacks",
+        libraryTarget: "umd",
+    },
+    module: {
+        rules: [tsRule("tsconfig.build.json"), lessRule(minify)],
+    },
+    optimization: {
+        minimize: minify,
+    },
+    plugins: [
+        new MiniCssExtractPlugin({
+            filename: `css/[name].css`,
+        }),
+    ],
+    resolve: commonResolve,
+});
+
+export { tsRule, lessRule, commonResolve };
+
+// build the bundle twice - once minified and once not
+export default [
+    (_, argv) => baseConfig(argv.mode === "production", true),
+    (_, argv) => baseConfig(argv.mode === "production", false),
+];

packages/stacks-classic/webpack.config.mjs

@@ -0,0 +1,56 @@
+import path from "path";
+import fs from "fs";
+import {
+    tsRule,
+    lessRule,
+    commonResolve,
+} from "../stacks-classic/webpack.config.mjs";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+
+import { fileURLToPath } from "node:url";
+import { dirname } from "node:path";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export default (_, argv) => {
+    const isProd = argv.mode === "production";
+
+    // load each entry.*.js file in assets/js as its own bundle
+    const entries = fs
+        .readdirSync(path.resolve(__dirname, "assets/js/"))
+        .filter((f) => f.startsWith("entry."))
+        .reduce((p, n) => {
+            // { "entry.file": "path/to/entry.file.js" }
+            p[n.slice(0, -3)] = path.resolve(__dirname, "assets/js/", n);
+            return p;
+        }, {});
+
+    return {
+        mode: isProd ? "production" : "development",
+        devtool: isProd ? false : "inline-source-map",
+        entry: {
+            docs: path.resolve(__dirname, "assets/js/index.ts"),
+            ...entries,
+        },
+        output: {
+            filename: "[name].js",
+            path: path.resolve(__dirname, "assets/dist"),
+            clean: true,
+        },
+        module: {
+            rules: [
+                tsRule(), // no special config file here
+                lessRule(isProd),
+            ],
+        },
+        plugins: [new MiniCssExtractPlugin()],
+        resolve: commonResolve,
+        devServer: {
+            webSocketURL: {
+                // 11ty/browsersync steal the default port (8080), so set it to something else
+                port: 8081,
+            },
+        },
+    };
+};