build(webpack): switch to commonjs for webpack config

This commit is contained in:
Sarah Vaupel 2024-10-02 23:53:18 +02:00
parent c7331db3ce
commit 6c862c98e9

View File

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