build(webpack): switch to commonjs for webpack config

webpack.config.cjs

@@ -2,34 +2,30 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-import webpack from 'webpack';
-import { resolve, join, relative } from 'node:path';
-import { execSync } from 'node:child_process';
-import tmp from 'tmp';
+const webpack = require('webpack');
+const path = require('node:path');
+// import { execSync } from 'node:child_process';
+const tmp = require('tmp');
 tmp.setGracefulCleanup();
-import fs from 'fs-extra';
-import { glob, globSync } from 'glob';
-import axios from 'axios';
+const fs = require('fs-extra');
 
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
-import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
-import { CleanWebpackPlugin } from 'clean-webpack-plugin';
-import CopyPlugin from 'copy-webpack-plugin';
-import TerserPlugin from 'terser-webpack-plugin';
-import yaml from 'js-yaml';
-import postcssPresetEnv from 'postcss-preset-env';
-import RemovePlugin from 'remove-files-webpack-plugin';
-import crypto from 'crypto';
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const yaml = require('js-yaml');
+const crypto = require('crypto');
 
 // import { version as webpackVersion } from 'webpack/package.json' assert { type: 'json' }; // version.split('.').slice(0, 2).join('.');
 // import { version as packageVersion } from './package.json' assert { type: 'json' };
 
-import webpackJson from 'webpack/package.json' assert { type: "json" };
+const webpackJson = require('webpack/package.json');
 const webpackVersion = webpackJson.version.split('.').slice(0, 2).join('.');
-import packageJson from './package.json' assert { type: "json" };
+const packageJson = require('./package.json');
 const packageVersion = packageJson.version;
-import i18nJson from './config/i18n.json' assert { type: 'json' };
+const i18nJson = require('./config/i18n.json');
 
 async function webpackConfig() {
   const wellKnownDir = 'well-known';
@@ -75,8 +71,8 @@ async function webpackConfig() {
               sourceMap: true,
               postcssOptions: { plugins: [ 'postcss-preset-env', 'autoprefixer' ], },
             }},
-            { loader: 'resolve-url-loader', options: { sourceMap: true }},
-            { loader: 'sass-loader', options: { implementation: import('sass'), sourceMap: true }},
+            { loader: 'path.resolve-url-loader', options: { sourceMap: true }},
+            { loader: 'sass-loader', options: { implementation: require('sass'), sourceMap: true }},
           ],
         },
         {
@@ -87,8 +83,8 @@ async function webpackConfig() {
     },
 
     entry: {
-      main: [ resolve('frontend/src/polyfill.js'),
-              resolve('frontend/src/main.js'),
+      main: [ path.resolve('frontend/src/polyfill.js'),
+              path.resolve('frontend/src/main.js'),
             ]
     },
 
@@ -101,14 +97,14 @@ async function webpackConfig() {
         ignoreOrder: false, // Enable to remove warnings about conflicting order
       }),
       new WebpackManifestPlugin({
-        fileName: resolve('config/webpack.yml'),
+        fileName: path.resolve('config/webpack.yml'),
         publicPath: `wp-${webpackVersion}`,
         generate: (seed, files, entrypoints) => Object.keys(entrypoints).reduce((acc, fs) => ({...acc, [fs]: files.filter(file => entrypoints[fs].filter(basename => !(/\.map$/.test(basename))).some(basename => file.path.endsWith(basename))).filter(file => file.isInitial).map(file => file.path)}), {}),
         serialize: yaml.dump
       }),
       new CleanWebpackPlugin({
-        cleanOnceBeforeBuildPatterns: [ resolve(staticDir),
-                                        resolve(wellKnownDir),
+        cleanOnceBeforeBuildPatterns: [ path.resolve(staticDir),
+                                        path.resolve(wellKnownDir),
                                       ]
       }),
       new webpack.IgnorePlugin({
@@ -138,8 +134,8 @@ async function webpackConfig() {
         cacheHash.update(JSON.stringify(langs));
 
         const cacheFiles = new Set([
-          resolve('config/robots.txt'),
-          resolve('assets/favicon.svg'),
+          path.resolve('config/robots.txt'),
+          path.resolve('assets/favicon.svg'),
         ]);
 
         for (const cacheFile of cacheFiles) {
@@ -150,7 +146,7 @@ async function webpackConfig() {
 
         let cachedVersion = undefined;
 
-        const versionFile = resolve(wellKnownCacheDir, `${cacheDigest}.version`);
+        const versionFile = path.resolve(wellKnownCacheDir, `${cacheDigest}.version`);
         try {
           if (fs.existsSync(versionFile)) {
             cachedVersion = fs.readFileSync(versionFile, 'utf8');
@@ -165,9 +161,9 @@ async function webpackConfig() {
           return [
             new CopyPlugin({
               patterns: [
-                { from: 'config/robots.txt', to: resolve(wellKnownDir, lang, 'robots.txt') },
-                { from: `${faviconsDir}/include.html`, to: resolve(wellKnownDir, lang, 'html_code.html') },
-                { from: `${faviconsDir}/*.png`, to: resolve(wellKnownDir, lang, '[name][ext]') },
+                { from: 'config/robots.txt', to: path.resolve(wellKnownDir, lang, 'robots.txt') },
+                { from: `${faviconsDir}/include.html`, to: path.resolve(wellKnownDir, lang, 'html_code.html') },
+                { from: `${faviconsDir}/*.png`, to: path.resolve(wellKnownDir, lang, '[name][ext]') },
               ]
             }),
           ];
@@ -178,7 +174,7 @@ async function webpackConfig() {
     output: {
       chunkFilename: '[chunkhash].js',
       filename: '[chunkhash].js',
-      path: resolve(staticDir, `wp-${webpackVersion}`),
+      path: path.resolve(staticDir, `wp-${webpackVersion}`),
       publicPath: `/${staticDir}/res/wp-${webpackVersion}/`,
       hashFunction: 'shake256',
       hashDigestLength: 36
@@ -190,8 +186,8 @@ async function webpackConfig() {
         new TerserPlugin({
           parallel: true,
           terserOptions: {
-            sourceMap: true
-          }
+            sourceMap: true,
+          },
         }),
         new CssMinimizerPlugin({
           parallel: true,
@@ -211,7 +207,7 @@ async function webpackConfig() {
 
     mode: 'production',
 
-    recordsPath: join(resolve('records.json')),
+    recordsPath: path.join(path.resolve('records.json')),
 
     performance: {
       assetFilter: (assetFilename) => !(/\.(map|svg|ttf|eot)$/.test(assetFilename))
@@ -219,6 +215,6 @@ async function webpackConfig() {
 
     devtool: 'source-map'
   };
-}
+};
 
-export default webpackConfig;
+module.exports = webpackConfig;