@pixolith/webpack-sw6-config 12.0.2 → 12.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixolith/webpack-sw6-config",
   "public": true,
-  "version": "12.0.2",
+  "version": "12.0.4",
   "description": "",
   "main": "src/index.js",
   "scripts": {},
@@ -21,7 +21,7 @@
     "url": "https://github.com/pixolith/webpack-plugins/issues"
   },
   "homepage": "https://github.com/pixolith/webpack-plugins/tree/master/packages/webpack-hook-plugin/#readme",
-  "gitHead": "f97131a8656eaf93375ee9289067ccad56ecfdf4",
+  "gitHead": "fb56cf1e8eb854872b9576456bdb1fbe7c5343f4",
   "dependencies": {
     "@babel/cli": "7.25.9",
     "@babel/core": "^7.26.0",
@@ -35,9 +35,9 @@
     "@pixolith/webpack-assets-copy-plugin": "^12.0.0",
     "@pixolith/webpack-filename-linter-plugin": "^12.0.0",
     "@pixolith/webpack-hook-plugin": "^12.0.0",
-    "@pixolith/webpack-sw6-plugin-map-emitter": "^12.0.0",
+    "@pixolith/webpack-sw6-plugin-map-emitter": "^12.0.3",
     "@pixolith/webpack-twig-assets-emitter-plugin": "^12.0.0",
-    "@pixolith/webpack-watcher": "^12.0.0",
+    "@pixolith/webpack-watcher": "^12.0.3",
     "@swc/core": "^1.9.3",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",

package/src/config.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const Path = require('path');
+const Os = require('os');
 
 const config = {
     isProd: process.env.NODE_ENV === 'production',
@@ -27,7 +28,13 @@ const config = {
     jsFolder: process.env.JS_FOLDER || 'js',
     iconsFolder: process.env.ICONS_FOLDER || 'icons',
 
-    spriteOrder: process.env.SPRITE_ORDER ?? ['pxsw/basic-theme', 'PxswBasicTheme', '**', 'pxsw/customer-theme', 'PxswCustomerTheme'],
+    spriteOrder: process.env.SPRITE_ORDER ?? [
+        'pxsw/basic-theme',
+        'PxswBasicTheme',
+        '**',
+        'pxsw/customer-theme',
+        'PxswCustomerTheme',
+    ],
     ignoreIcons: process.env.IGNORE_ICONS ?? [],
 
     mediaQueries: process.env.MEDIA_QUERIES || false,
@@ -40,12 +47,25 @@ const config = {
     pluginsPublicPath: Path.join(process.cwd(), 'public'),
     vendorPublicPath: Path.join(process.cwd(), 'public/bundles'),
 
-    shopwareVendorPath: Path.join(process.cwd(), 'vendor/shopware/storefront/Resources/app/storefront/vendor'),
-    shopwarePluginPath: Path.join(process.cwd(), 'vendor/shopware/storefront/Resources/app/storefront/src'),
+    shopwareVendorPath: Path.join(
+        process.cwd(),
+        'vendor/shopware/storefront/Resources/app/storefront/vendor',
+    ),
+    shopwarePluginPath: Path.join(
+        process.cwd(),
+        'vendor/shopware/storefront/Resources/app/storefront/src',
+    ),
 
     allowedExtensions: ['.ts', '.js', '.scss', '.css', '.svg'],
+
+    // Dev server connection settings (used for devServer config + output.publicPath in dev)
+    devServerHostname: process.env.DEV_SERVER_HOSTNAME || 'node.px-staging.de',
+    devServerPort: process.env.SHOPWARE_MODE === 'administration' ? 8080 : 8081,
+    devServerProtocol: process.env.DEV_SERVER_PROTOCOL || 'https',
 };
 
+config.devServerPublicUrl = `${config.devServerProtocol}://${config.devServerHostname}:${config.devServerPort}/`;
+
 // PICKED_THEME: optional filter to build/watch a single theme from THEME_NAMES
 let pickedTheme = process.env.PICKED_THEME
     ? process.env.PICKED_THEME.trim()
@@ -53,7 +73,9 @@ let pickedTheme = process.env.PICKED_THEME
 
 if (pickedTheme && config.themeNames.indexOf(pickedTheme) === -1) {
     process.stderr.write(
-        `PICKED_THEME "${pickedTheme}" is not in THEME_NAMES [${config.themeNames.join(', ')}].\n`,
+        `PICKED_THEME "${pickedTheme}" is not in THEME_NAMES [${config.themeNames.join(
+            ', ',
+        )}].\n`,
     );
     process.exit(1);
 }
@@ -62,6 +84,21 @@ if (pickedTheme && config.themeNames.indexOf(pickedTheme) === -1) {
 // themeNames stays as the full list (used for _global_resources exclusion)
 config.buildThemes = pickedTheme ? [pickedTheme] : config.themeNames;
 
+// buildParallelism: how many per-theme compilers webpack's MultiCompiler runs
+// concurrently. Default is webpack's `Infinity` (all themes at once) which is
+// extremely memory-hungry with many themes. We cap it to a conservative,
+// CPU-aware value. Override with BUILD_PARALLELISM=<n> (e.g. on big CI boxes).
+// Peak memory ≈ buildParallelism × (memory of one theme compiler).
+config.buildParallelism = (() => {
+    let raw = parseInt(process.env.BUILD_PARALLELISM, 10);
+    let value =
+        Number.isInteger(raw) && raw > 0
+            ? raw
+            : Math.max(2, Math.floor(Os.cpus().length / 4));
+    // Never exceed the number of themes actually being built.
+    return Math.max(1, Math.min(value, config.buildThemes.length || 1));
+})();
+
 const pxEntryPath =
     process.env.PX_ENTRY_PATH ||
     (process.env.SHOPWARE_MODE === 'storefront'
@@ -74,12 +111,25 @@ const pxRouteSplitPath =
         : '');
 
 // Create a glob regex to match the plugin prefixes
-let prefixes = config.pluginPrefixes.split(',').map(p => `${p}*`).join('|');
+let prefixes = config.pluginPrefixes
+    .split(',')
+    .map((p) => `${p}*`)
+    .join('|');
 const pluginSrcPath = Path.join(config.pluginsBasePath, `+(${prefixes})`);
-const vendorSrcPath = Path.join(config.vendorBasePath, `+(${config.pluginPrefixes.replace(',', '|').toLowerCase()})`, '*');
-
-const pluginMatch = new RegExp(`/plugins\/((${config.pluginPrefixes.replace(',', '|')})\\w*)\/`);
-const vendorMatch = new RegExp(`/(vendor\/(${config.pluginPrefixes.replace(',', '|').toLowerCase()})\/[\\w-]*)\/`);
+const vendorSrcPath = Path.join(
+    config.vendorBasePath,
+    `+(${config.pluginPrefixes.replace(',', '|').toLowerCase()})`,
+    '*',
+);
+
+const pluginMatch = new RegExp(
+    `/plugins\/((${config.pluginPrefixes.replace(',', '|')})\\w*)\/`,
+);
+const vendorMatch = new RegExp(
+    `/(vendor\/(${config.pluginPrefixes
+        .replace(',', '|')
+        .toLowerCase()})\/[\\w-]*)\/`,
+);
 const routeSplitMatch = new RegExp(`/scss-route-split\/([\\w-]*)`);
 
 module.exports = {
@@ -96,11 +146,31 @@ module.exports = {
     pluginMatch: pluginMatch,
     vendorMatch: vendorMatch,
 
-    sharedScssPluginPath: Path.join(pluginSrcPath, pxEntryPath, config.pxSharedPath, config.scssFolder),
-    sharedScssVendorPath: Path.join(vendorSrcPath, pxEntryPath, config.pxSharedPath, config.scssFolder),
-
-    sharedIconPluginPath: Path.join(pluginSrcPath, pxEntryPath, config.pxSharedPath, config.iconsFolder),
-    sharedIconVendorPath: Path.join(vendorSrcPath, pxEntryPath, config.pxSharedPath, config.iconsFolder),
+    sharedScssPluginPath: Path.join(
+        pluginSrcPath,
+        pxEntryPath,
+        config.pxSharedPath,
+        config.scssFolder,
+    ),
+    sharedScssVendorPath: Path.join(
+        vendorSrcPath,
+        pxEntryPath,
+        config.pxSharedPath,
+        config.scssFolder,
+    ),
+
+    sharedIconPluginPath: Path.join(
+        pluginSrcPath,
+        pxEntryPath,
+        config.pxSharedPath,
+        config.iconsFolder,
+    ),
+    sharedIconVendorPath: Path.join(
+        vendorSrcPath,
+        pxEntryPath,
+        config.pxSharedPath,
+        config.iconsFolder,
+    ),
 
     routeSplitMatch: routeSplitMatch,
     pluginRouteSplitPath: Path.join(pluginSrcPath, pxRouteSplitPath),

package/src/index.js

@@ -35,6 +35,7 @@ const setup = () => {
             shopwareMode: config.shopwareMode,
             assetUrl: config.assetUrl,
             themeNames: config.themeNames.join(', ') + (config.buildThemes.length < config.themeNames.length ? ' (building: ' + config.buildThemes.join(', ') + ')' : ''),
+            parallelism: config.buildParallelism + ' / ' + config.buildThemes.length + ' themes',
             version: pkg.version,
         });
     }
@@ -125,7 +126,7 @@ const getResourcesPaths = (themeName, options) => {
 const createThemeConfigs = (options) => {
     setup();
 
-    return config.buildThemes.map((themeName, index) => {
+    let themeConfigs = config.buildThemes.map((themeName, index) => {
         let resourcesPaths = getResourcesPaths(themeName, options);
         let themeSlug = ChangeCase.kebabCase(themeName);
         let themeOptions = {
@@ -157,6 +158,12 @@ const createThemeConfigs = (options) => {
 
         return merged;
     });
+
+    // Limit how many theme compilers run concurrently (webpack MultiCompiler).
+    // Without this webpack runs all of them in parallel in a single process.
+    themeConfigs.parallelism = config.buildParallelism;
+
+    return themeConfigs;
 };
 
 const setupAdministration = () => {
@@ -181,6 +188,7 @@ const setupAdministration = () => {
             shopwareMode: config.shopwareMode,
             assetUrl: config.assetUrl,
             themeNames: config.themeNames.join(', ') + (config.buildThemes.length < config.themeNames.length ? ' (building: ' + config.buildThemes.join(', ') + ')' : ''),
+            parallelism: config.buildParallelism + ' / ' + config.buildThemes.length + ' themes',
             version: pkg.version,
         });
     }
@@ -200,7 +208,7 @@ const setupAdministration = () => {
 const createAdminConfigs = (options) => {
     setupAdministration();
 
-    return config.buildThemes.map((themeName, index) => {
+    let adminConfigs = config.buildThemes.map((themeName, index) => {
         let resourcesPaths = getResourcesPaths(themeName, options);
         let themeSlug = ChangeCase.kebabCase(themeName);
         let themeOptions = {
@@ -232,6 +240,11 @@ const createAdminConfigs = (options) => {
 
         return merged;
     });
+
+    // Limit how many theme compilers run concurrently (webpack MultiCompiler).
+    adminConfigs.parallelism = config.buildParallelism;
+
+    return adminConfigs;
 };
 
 module.exports = {

package/src/webpack.config.dev.js

@@ -105,16 +105,14 @@ module.exports = function createDevConfig(themeOptions) {
             allowedHosts: 'all',
             client: {
                 webSocketURL: {
-                    hostname: 'node.px-staging.de',
+                    hostname: config.devServerHostname,
                     protocol: 'wss',
-                    port:
-                        process.env.SHOPWARE_MODE === 'administration'
-                            ? 8080
-                            : 8081,
+                    port: config.devServerPort,
                 },
                 overlay: {
                     warnings: false,
                     errors: true,
+                    runtimeErrors: false,
                 },
             },
             headers: {
@@ -124,7 +122,7 @@ module.exports = function createDevConfig(themeOptions) {
                 'Access-Control-Allow-Headers':
                     'X-Requested-With, content-type, Authorization',
             },
-            port: process.env.SHOPWARE_MODE === 'administration' ? 8080 : 8081,
+            port: config.devServerPort,
             server: !config.isProd
                 ? {
                       type: 'https',
@@ -150,8 +148,9 @@ module.exports = function createDevConfig(themeOptions) {
                       },
                   }
                 : 'http',
+            liveReload: false,
             devMiddleware: {
-                writeToDisk: true,
+                writeToDisk: (filePath) => !filePath.includes('.hot-update.'),
             },
             setupMiddlewares: (middlewares, devServer) => {
                 if (!devServer) {
@@ -197,5 +196,8 @@ module.exports = function createDevConfig(themeOptions) {
                 : [],
         ),
         watch: false,
+        optimization: {
+            runtimeChunk: 'single',
+        },
     };
 };

package/src/webpack.config.storefront.js

@@ -14,7 +14,8 @@ module.exports = function createStorefrontConfig(themeOptions) {
 
     let outputConfig = {
         path: config.outputPath,
-        publicPath: config.assetUrl,
+        publicPath: config.isProd ? config.assetUrl : config.devServerPublicUrl,
+        crossOriginLoading: config.isProd ? false : 'anonymous',
         chunkFilename: (chunkData) => {
             return `js/chunk[name]${config.isProd ? '.[contenthash]' : ''}.js`;
         },