diff --git a/packages/stacks-classic/webpack.config.js b/packages/stacks-classic/webpack.config.js
deleted file mode 100644
index f205af9d41..0000000000
--- a/packages/stacks-classic/webpack.config.js
+++ /dev/null
@@ -1,78 +0,0 @@
-const path = require("path");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-
-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: [
-            {
-                test: /\.tsx?$/,
-                exclude: /node_modules/,
-                use: [
-                    {
-                        loader: "ts-loader",
-                        options: {
-                            configFile: "tsconfig.build.json",
-                        },
-                    },
-                ],
-            },
-            {
-                test: /\.less$/,
-                use: [
-                    isProd ? MiniCssExtractPlugin.loader : "",
-                    {
-                        loader: "css-loader",
-                        options: {
-                            importLoaders: 1,
-                            url: false,
-                        },
-                    },
-                    {
-                        loader: "postcss-loader",
-                        options: {
-                            postcssOptions: {
-                                plugins: minify ? [require("cssnano")] : [],
-                            },
-                        },
-                    },
-                    "less-loader",
-                ],
-            },
-        ],
-    },
-    optimization: {
-        minimize: minify,
-    },
-    plugins: [
-        new MiniCssExtractPlugin({
-            filename: `css/[name].css`,
-        }),
-    ],
-    resolve: {
-        extensions: [".tsx", ".ts", ".js"],
-    },
-});
-
-// build the bundle twice - once minified and once not
-module.exports = [
-    (_, argv) => baseConfig(isProd = argv.mode === "production", true),
-    (_, argv) => baseConfig(isProd = argv.mode === "production", false),
-];
diff --git a/packages/stacks-classic/webpack.config.mjs b/packages/stacks-classic/webpack.config.mjs
new file mode 100644
index 0000000000..3ad4cb9c23
--- /dev/null
+++ b/packages/stacks-classic/webpack.config.mjs
@@ -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),
+];
diff --git a/packages/stacks-docs/webpack.config.js b/packages/stacks-docs/webpack.config.js
deleted file mode 100644
index 4f6b212a06..0000000000
--- a/packages/stacks-docs/webpack.config.js
+++ /dev/null
@@ -1,68 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-
-module.exports = (_, 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: [
-                {
-                    test: /\.tsx?$/,
-                    exclude: /node_modules/,
-                    use: [
-                        "ts-loader",
-                    ],
-                },
-                {
-                    test: /\.less$/,
-                    use: [
-                        isProd ? MiniCssExtractPlugin.loader : "",
-                        {
-                            loader: "css-loader",
-                            options: {
-                                importLoaders: 1,
-                                url: false,
-                            },
-                        },
-                        "postcss-loader",
-                        "less-loader",
-                    ],
-                },
-            ],
-        },
-        plugins: [
-            new MiniCssExtractPlugin()
-        ],
-        resolve: {
-            extensions: [".tsx", ".ts", ".js"],
-        },
-        devServer: {
-            webSocketURL: {
-                // 11ty/browsersync steal the default port (8080), so set it to something else
-                port: 8081
-            }
-        }
-    };
-};
diff --git a/packages/stacks-docs/webpack.config.mjs b/packages/stacks-docs/webpack.config.mjs
new file mode 100644
index 0000000000..42342b4780
--- /dev/null
+++ b/packages/stacks-docs/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,
+            },
+        },
+    };
+};