diff --git a/.webpack/css.js b/.webpack/css.mjs
similarity index 71%
rename from .webpack/css.js
rename to .webpack/css.mjs
index 2d3faf55..338ae91b 100644
--- a/.webpack/css.js
+++ b/.webpack/css.mjs
@@ -1,9 +1,6 @@
-'use strict';
-
-const {env} = require('node:process');
-
-const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+import {env} from 'node:process';
+import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 
 const isDev = env.NODE_ENV === 'development';
 
@@ -29,7 +26,7 @@ const rules = [{
     type: 'asset/inline',
 }];
 
-module.exports = {
+export default {
     plugins,
     module: {
         rules,
diff --git a/.webpack/html.js b/.webpack/html.mjs
similarity index 85%
rename from .webpack/html.js
rename to .webpack/html.mjs
index 3717bcc9..e90038ac 100644
--- a/.webpack/html.js
+++ b/.webpack/html.mjs
@@ -1,11 +1,9 @@
-'use strict';
-
-const {env} = require('node:process');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+import {env} from 'node:process';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 const isDev = env.NODE_ENV === 'development';
 
-const plugins = [
+export const plugins = [
     new HtmlWebpackPlugin({
         inject: false,
         template: 'html/index.html',
@@ -13,10 +11,6 @@ const plugins = [
     }),
 ];
 
-module.exports = {
-    plugins,
-};
-
 function getMinifyHtmlOptions() {
     return {
         removeComments: true,
diff --git a/.webpack/js.js b/.webpack/js.mjs
similarity index 92%
rename from .webpack/js.js
rename to .webpack/js.mjs
index 1e3144cf..5788300b 100644
--- a/.webpack/js.js
+++ b/.webpack/js.mjs
@@ -1,18 +1,12 @@
-'use strict';
+import {resolve, sep} from 'node:path';
+import {env} from 'node:process';
+import webpack from 'webpack';
+import WebpackBar from 'webpackbar';
 
-const {
-    resolve,
-    sep,
-    join,
-} = require('node:path');
-
-const {env} = require('node:process');
 const {
     EnvironmentPlugin,
     NormalModuleReplacementPlugin,
-} = require('webpack');
-
-const WebpackBar = require('webpackbar');
+} = webpack;
 
 const modules = './modules';
 const dirModules = './client/modules';
@@ -23,7 +17,7 @@ const dir = './client';
 const {NODE_ENV} = env;
 const isDev = NODE_ENV === 'development';
 
-const rootDir = join(__dirname, '..');
+const rootDir = new URL('..', import.meta.url).pathname;
 const dist = resolve(rootDir, 'dist');
 const distDev = resolve(rootDir, 'dist-dev');
 const devtool = isDev ? 'eval' : 'source-map';
@@ -92,7 +86,7 @@ const splitChunks = {
     },
 };
 
-module.exports = {
+export default {
     resolve: {
         symlinks: false,
         alias: {
@@ -100,8 +94,8 @@ module.exports = {
             'node:path': 'path',
         },
         fallback: {
-            path: require.resolve('path-browserify'),
-            process: require.resolve('process/browser'),
+            path: import.meta.resolve('path-browserify'),
+            process: import.meta.resolve('process/browser'),
         },
     },
     devtool,
diff --git a/cssnano.config.js b/cssnano.config.mjs
similarity index 63%
rename from cssnano.config.js
rename to cssnano.config.mjs
index 91ae5f81..44abaeaf 100644
--- a/cssnano.config.js
+++ b/cssnano.config.mjs
@@ -1,9 +1,7 @@
-'use strict';
-
 // used by OptimizeCssAssetsPlugin
-const defaultPreset = require('cssnano-preset-default');
+import defaultPreset from 'cssnano-preset-default';
 
-module.exports = defaultPreset({
+export default defaultPreset({
     svgo: {
         plugins: [{
             convertPathData: false,
diff --git a/eslint.config.mjs b/eslint.config.mjs
index ad22cf4a..e4cc3211 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -18,10 +18,7 @@ export const match = {
     },
     'bin/cloudcmd.js': {
         'no-console': 'off',
-    },
-    'cssnano.config.js': {
-        'n/no-extraneous-require': 'off',
-    },
+    }
 };
 export default defineConfig([
     safeAlign, {
diff --git a/package.json b/package.json
index 75583723..323ad9ff 100644
--- a/package.json
+++ b/package.json
@@ -169,6 +169,7 @@
     "codegen.macro": "^4.0.0",
     "css-loader": "^7.1.2",
     "css-modules-require-hook": "^4.2.3",
+    "cssnano-preset-default": "^7.0.10",
     "domtokenlist-shim": "^1.2.0",
     "emitify": "^4.0.1",
     "eslint": "^9.23.0",
diff --git a/webpack.config.js b/webpack.config.js
deleted file mode 100644
index 63a920f2..00000000
--- a/webpack.config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-'use strict';
-
-const {merge} = require('webpack-merge');
-
-const htmlConfig = require('./.webpack/html');
-const cssConfig = require('./.webpack/css');
-const jsConfig = require('./.webpack/js');
-
-module.exports = merge([
-    jsConfig,
-    htmlConfig,
-    cssConfig,
-]);
diff --git a/webpack.config.mjs b/webpack.config.mjs
new file mode 100644
index 00000000..a1eb0da2
--- /dev/null
+++ b/webpack.config.mjs
@@ -0,0 +1,10 @@
+import {merge} from 'webpack-merge';
+import * as htmlConfig from './.webpack/html.mjs';
+import cssConfig from './.webpack/css.mjs';
+import jsConfig from './.webpack/js.mjs';
+
+export default merge([
+    jsConfig,
+    htmlConfig,
+    cssConfig,
+]);