diff --git a/resources/todomvc/architecture-examples/react-redux/package.json b/resources/todomvc/architecture-examples/react-redux/package.json
index 16d35b3ac..7afb8367a 100644
--- a/resources/todomvc/architecture-examples/react-redux/package.json
+++ b/resources/todomvc/architecture-examples/react-redux/package.json
@@ -9,8 +9,8 @@
     },
     "scripts": {
         "sanitize": "OUTPUT_FOLDER=./dist node node_modules/sanitize-language",
-        "build": "webpack --config webpack.prod.js && npm run sanitize",
-        "dev": "webpack serve --open --config webpack.dev.js",
+        "build": "webpack --config webpack.prod.mjs && npm run sanitize",
+        "dev": "webpack serve --open --config webpack.dev.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors",
         "test": "jest"
     },
diff --git a/resources/todomvc/architecture-examples/react-redux/webpack.common.js b/resources/todomvc/architecture-examples/react-redux/webpack.common.mjs
similarity index 79%
rename from resources/todomvc/architecture-examples/react-redux/webpack.common.js
rename to resources/todomvc/architecture-examples/react-redux/webpack.common.mjs
index 5881f50aa..108582c16 100644
--- a/resources/todomvc/architecture-examples/react-redux/webpack.common.js
+++ b/resources/todomvc/architecture-examples/react-redux/webpack.common.mjs
@@ -1,9 +1,10 @@
-const path = require("path");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
+import path from "path";
+const currentDir = import.meta.dirname;
+import HtmlWebpackPlugin from "html-webpack-plugin";
 
-module.exports = {
+export default {
     entry: {
-        app: path.resolve(__dirname, "src", "index.js"),
+        app: path.resolve(currentDir, "src", "index.js"),
     },
     plugins: [
         new HtmlWebpackPlugin({
@@ -13,7 +14,7 @@ module.exports = {
     ],
     output: {
         filename: "[name].bundle.js",
-        path: path.resolve(__dirname, "dist"),
+        path: path.resolve(currentDir, "dist"),
         clean: true,
     },
     resolve: {
diff --git a/resources/todomvc/architecture-examples/react/webpack.dev.js b/resources/todomvc/architecture-examples/react-redux/webpack.dev.mjs
similarity index 69%
rename from resources/todomvc/architecture-examples/react/webpack.dev.js
rename to resources/todomvc/architecture-examples/react-redux/webpack.dev.mjs
index 774d05584..7fc3cdedd 100644
--- a/resources/todomvc/architecture-examples/react/webpack.dev.js
+++ b/resources/todomvc/architecture-examples/react-redux/webpack.dev.mjs
@@ -1,7 +1,7 @@
-const { merge } = require("webpack-merge");
-const common = require("./webpack.common.js");
+import { merge } from "webpack-merge";
+import common from "./webpack.common.mjs";
 
-module.exports = merge(common, {
+export default merge(common, {
     mode: "development",
     devtool: "inline-source-map",
     devServer: {
diff --git a/resources/todomvc/vanilla-examples/javascript-es6-webpack/webpack.prod.js b/resources/todomvc/architecture-examples/react-redux/webpack.prod.mjs
similarity index 61%
rename from resources/todomvc/vanilla-examples/javascript-es6-webpack/webpack.prod.js
rename to resources/todomvc/architecture-examples/react-redux/webpack.prod.mjs
index c40f490d4..b881b4281 100644
--- a/resources/todomvc/vanilla-examples/javascript-es6-webpack/webpack.prod.js
+++ b/resources/todomvc/architecture-examples/react-redux/webpack.prod.mjs
@@ -1,11 +1,12 @@
-const { merge } = require("webpack-merge");
-const common = require("./webpack.common.js");
+import { merge } from "webpack-merge";
+import common from "./webpack.common.mjs";
 
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
-const TerserPlugin = require("terser-webpack-plugin");
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
 
-module.exports = merge(common, {
+import TerserPlugin from "terser-webpack-plugin";
+
+export default merge(common, {
     mode: "production",
     devtool: "source-map",
     plugins: [
diff --git a/resources/todomvc/architecture-examples/react/package.json b/resources/todomvc/architecture-examples/react/package.json
index cb0f07295..c243f57e2 100755
--- a/resources/todomvc/architecture-examples/react/package.json
+++ b/resources/todomvc/architecture-examples/react/package.json
@@ -8,8 +8,8 @@
         "npm": ">=8.19.3"
     },
     "scripts": {
-        "build": "webpack --config webpack.prod.js",
-        "dev": "webpack serve --open --config webpack.dev.js",
+        "build": "webpack --config webpack.prod.mjs",
+        "dev": "webpack serve --open --config webpack.dev.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors",
         "test": "jest"
     },
diff --git a/resources/todomvc/architecture-examples/react/webpack.common.js b/resources/todomvc/architecture-examples/react/webpack.common.mjs
similarity index 74%
rename from resources/todomvc/architecture-examples/react/webpack.common.js
rename to resources/todomvc/architecture-examples/react/webpack.common.mjs
index ed3adfe93..7beb25601 100644
--- a/resources/todomvc/architecture-examples/react/webpack.common.js
+++ b/resources/todomvc/architecture-examples/react/webpack.common.mjs
@@ -1,19 +1,20 @@
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const path = require("path");
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import path from "path";
+const currentDir = import.meta.dirname;
 
-module.exports = {
+export default {
     entry: {
-        app: path.resolve(__dirname, "src", "index.js"),
+        app: path.resolve(currentDir, "src", "index.js"),
     },
     plugins: [
         new HtmlWebpackPlugin({
             title: "TodoMVC: React",
-            template: path.resolve(__dirname, "public", "index.html"),
+            template: path.resolve(currentDir, "public", "index.html"),
         }),
     ],
     output: {
         filename: "[name].bundle.js",
-        path: path.resolve(__dirname, "dist"),
+        path: path.resolve(currentDir, "dist"),
         clean: true,
     },
     resolve: {
diff --git a/resources/todomvc/architecture-examples/react-redux/webpack.dev.js b/resources/todomvc/architecture-examples/react/webpack.dev.mjs
similarity index 69%
rename from resources/todomvc/architecture-examples/react-redux/webpack.dev.js
rename to resources/todomvc/architecture-examples/react/webpack.dev.mjs
index 774d05584..7fc3cdedd 100644
--- a/resources/todomvc/architecture-examples/react-redux/webpack.dev.js
+++ b/resources/todomvc/architecture-examples/react/webpack.dev.mjs
@@ -1,7 +1,7 @@
-const { merge } = require("webpack-merge");
-const common = require("./webpack.common.js");
+import { merge } from "webpack-merge";
+import common from "./webpack.common.mjs";
 
-module.exports = merge(common, {
+export default merge(common, {
     mode: "development",
     devtool: "inline-source-map",
     devServer: {
diff --git a/resources/todomvc/architecture-examples/react/webpack.prod.js b/resources/todomvc/architecture-examples/react/webpack.prod.mjs
similarity index 61%
rename from resources/todomvc/architecture-examples/react/webpack.prod.js
rename to resources/todomvc/architecture-examples/react/webpack.prod.mjs
index b037045c9..b881b4281 100644
--- a/resources/todomvc/architecture-examples/react/webpack.prod.js
+++ b/resources/todomvc/architecture-examples/react/webpack.prod.mjs
@@ -1,12 +1,12 @@
-const { merge } = require("webpack-merge");
-const common = require("./webpack.common.js");
+import { merge } from "webpack-merge";
+import common from "./webpack.common.mjs";
 
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
 
-const TerserPlugin = require("terser-webpack-plugin");
+import TerserPlugin from "terser-webpack-plugin";
 
-module.exports = merge(common, {
+export default merge(common, {
     mode: "production",
     devtool: "source-map",
     plugins: [
diff --git a/resources/todomvc/big-dom-generator/package.json b/resources/todomvc/big-dom-generator/package.json
index 4b9388c7a..fcb08e29f 100644
--- a/resources/todomvc/big-dom-generator/package.json
+++ b/resources/todomvc/big-dom-generator/package.json
@@ -7,9 +7,9 @@
         "npm": ">=8.19.3"
     },
     "scripts": {
-        "build": "webpack --config webpack.prod.js",
+        "build": "webpack --config webpack.prod.mjs",
         "postbuild": "node dist/app.bundle.js && purgecss -css dist/big-dom.css --content dist/index.html --output=dist/big-dom.css && rm dist/app.bundle.js && rm dist/app.bundle.js.LICENSE.txt && node utils/createVariant.js",
-        "dev": "webpack serve --open --config webpack.dev.js",
+        "dev": "webpack serve --open --config webpack.dev.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "devDependencies": {
diff --git a/resources/todomvc/big-dom-generator/webpack.common.js b/resources/todomvc/big-dom-generator/webpack.common.mjs
similarity index 84%
rename from resources/todomvc/big-dom-generator/webpack.common.js
rename to resources/todomvc/big-dom-generator/webpack.common.mjs
index 295e85d67..d763bedd1 100644
--- a/resources/todomvc/big-dom-generator/webpack.common.js
+++ b/resources/todomvc/big-dom-generator/webpack.common.mjs
@@ -1,12 +1,13 @@
-const path = require("path");
+import path from "path";
+const currentDir = import.meta.dirname;
 
-module.exports = {
+export default {
     entry: {
-        app: path.resolve(__dirname, "index.js"),
+        app: path.resolve(currentDir, "index.js"),
     },
     output: {
         filename: "[name].bundle.js",
-        path: path.resolve(__dirname, "dist"),
+        path: path.resolve(currentDir, "dist"),
         clean: true,
     },
     resolve: {
diff --git a/resources/todomvc/big-dom-generator/webpack.dev.js b/resources/todomvc/big-dom-generator/webpack.dev.mjs
similarity index 69%
rename from resources/todomvc/big-dom-generator/webpack.dev.js
rename to resources/todomvc/big-dom-generator/webpack.dev.mjs
index 774d05584..7fc3cdedd 100644
--- a/resources/todomvc/big-dom-generator/webpack.dev.js
+++ b/resources/todomvc/big-dom-generator/webpack.dev.mjs
@@ -1,7 +1,7 @@
-const { merge } = require("webpack-merge");
-const common = require("./webpack.common.js");
+import { merge } from "webpack-merge";
+import common from "./webpack.common.mjs";
 
-module.exports = merge(common, {
+export default merge(common, {
     mode: "development",
     devtool: "inline-source-map",
     devServer: {
diff --git a/resources/todomvc/big-dom-generator/webpack.prod.js b/resources/todomvc/big-dom-generator/webpack.prod.mjs
similarity index 62%
rename from resources/todomvc/big-dom-generator/webpack.prod.js
rename to resources/todomvc/big-dom-generator/webpack.prod.mjs
index 05a094dbc..bffa72e54 100644
--- a/resources/todomvc/big-dom-generator/webpack.prod.js
+++ b/resources/todomvc/big-dom-generator/webpack.prod.mjs
@@ -1,11 +1,16 @@
-const { merge } = require("webpack-merge");
-const common = require("./webpack.common.js");
+import { merge } from "webpack-merge";
+import common from "./webpack.common.mjs";
 
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const CopyPlugin = require("copy-webpack-plugin");
-const webpack = require("webpack");
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import CopyPlugin from "copy-webpack-plugin";
+import webpack from "webpack";
 
-module.exports = merge(common, {
+import postcssImport from "postcss-import";
+import postcssVarfallback from "postcss-varfallback";
+import postcssDropunusedvars from "postcss-dropunusedvars";
+import cssnano from "cssnano";
+
+export default merge(common, {
     mode: "production",
     plugins: [
         new MiniCssExtractPlugin({
@@ -33,7 +38,7 @@ module.exports = merge(common, {
                         loader: "postcss-loader",
                         options: {
                             postcssOptions: {
-                                plugins: [require("postcss-import"), require("postcss-varfallback"), require("postcss-dropunusedvars"), require("cssnano")],
+                                plugins: [postcssImport, postcssVarfallback, postcssDropunusedvars, cssnano],
                             },
                         },
                     },
diff --git a/resources/todomvc/vanilla-examples/javascript-es6-webpack/package.json b/resources/todomvc/vanilla-examples/javascript-es6-webpack/package.json
index 5bc9b2bc9..56df69f21 100644
--- a/resources/todomvc/vanilla-examples/javascript-es6-webpack/package.json
+++ b/resources/todomvc/vanilla-examples/javascript-es6-webpack/package.json
@@ -8,8 +8,8 @@
     },
     "private": true,
     "scripts": {
-        "dev": "webpack serve --open --config webpack.dev.js",
-        "build": "webpack --config webpack.prod.js",
+        "dev": "webpack serve --open --config webpack.dev.mjs",
+        "build": "webpack --config webpack.prod.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "dependencies": {
diff --git a/resources/todomvc/vanilla-examples/javascript-es6-webpack/webpack.common.js b/resources/todomvc/vanilla-examples/javascript-es6-webpack/webpack.common.mjs
similarity index 56%
rename from resources/todomvc/vanilla-examples/javascript-es6-webpack/webpack.common.js
rename to resources/todomvc/vanilla-examples/javascript-es6-webpack/webpack.common.mjs
index aa49f0d3b..30159a665 100644
--- a/resources/todomvc/vanilla-examples/javascript-es6-webpack/webpack.common.js
+++ b/resources/todomvc/vanilla-examples/javascript-es6-webpack/webpack.common.mjs
@@ -1,19 +1,21 @@
-const path = require("path");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
+import path from "path";
+import HtmlWebpackPlugin from "html-webpack-plugin";
 
-module.exports = {
+const currentDir = import.meta.dirname;
+
+export default {
     entry: {
-        app: path.resolve(__dirname, "src", "app.js"),
+        app: path.resolve(currentDir, "src", "app.js"),
     },
     plugins: [
         new HtmlWebpackPlugin({
             title: "TodoMVC: JavaScript Es6 Webpack",
-            template: path.resolve(__dirname, "src", "index.html"),
+            template: path.resolve(currentDir, "src", "index.html"),
         }),
     ],
     output: {
         filename: "[name].bundle.js",
-        path: path.resolve(__dirname, "dist"),
+        path: path.resolve(currentDir, "dist"),
         clean: true,
     },
     module: {
diff --git a/resources/todomvc/vanilla-examples/javascript-es6-webpack/webpack.dev.js b/resources/todomvc/vanilla-examples/javascript-es6-webpack/webpack.dev.mjs
similarity index 69%
rename from resources/todomvc/vanilla-examples/javascript-es6-webpack/webpack.dev.js
rename to resources/todomvc/vanilla-examples/javascript-es6-webpack/webpack.dev.mjs
index 774d05584..7fc3cdedd 100644
--- a/resources/todomvc/vanilla-examples/javascript-es6-webpack/webpack.dev.js
+++ b/resources/todomvc/vanilla-examples/javascript-es6-webpack/webpack.dev.mjs
@@ -1,7 +1,7 @@
-const { merge } = require("webpack-merge");
-const common = require("./webpack.common.js");
+import { merge } from "webpack-merge";
+import common from "./webpack.common.mjs";
 
-module.exports = merge(common, {
+export default merge(common, {
     mode: "development",
     devtool: "inline-source-map",
     devServer: {
diff --git a/resources/todomvc/architecture-examples/react-redux/webpack.prod.js b/resources/todomvc/vanilla-examples/javascript-es6-webpack/webpack.prod.mjs
similarity index 61%
rename from resources/todomvc/architecture-examples/react-redux/webpack.prod.js
rename to resources/todomvc/vanilla-examples/javascript-es6-webpack/webpack.prod.mjs
index b037045c9..f95ea084a 100644
--- a/resources/todomvc/architecture-examples/react-redux/webpack.prod.js
+++ b/resources/todomvc/vanilla-examples/javascript-es6-webpack/webpack.prod.mjs
@@ -1,12 +1,11 @@
-const { merge } = require("webpack-merge");
-const common = require("./webpack.common.js");
+import { merge } from "webpack-merge";
+import common from "./webpack.common.mjs";
 
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
+import TerserPlugin from "terser-webpack-plugin";
 
-const TerserPlugin = require("terser-webpack-plugin");
-
-module.exports = merge(common, {
+export default merge(common, {
     mode: "production",
     devtool: "source-map",
     plugins: [