chore: webpack: migrate to ESM

.webpack/css.mjs

@@ -1,9 +1,6 @@
-'use strict';
+import {env} from 'node:process';
-
+import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
-const {env} = require('node:process');
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-
-const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const MiniCssExtractPlugin = require('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,

.webpack/html.mjs

@@ -1,11 +1,9 @@
-'use strict';
+import {env} from 'node:process';
-
+import HtmlWebpackPlugin from 'html-webpack-plugin';
-const {env} = require('node:process');
-const HtmlWebpackPlugin = require('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,

.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');
+} = webpack;
-
-const WebpackBar = require('webpackbar');
 
 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'),
+            path: import.meta.resolve('path-browserify'),
-            process: require.resolve('process/browser'),
+            process: import.meta.resolve('process/browser'),
         },
     },
     devtool,

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,

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, {

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",

webpack.config.js

@@ -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,
-]);

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,
+]);