@pixolith/webpack-sw6-config 12.0.2 → 12.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixolith/webpack-sw6-config",
   "public": true,
-  "version": "12.0.2",
+  "version": "12.0.3",
   "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": "5b13ac682aa7897d252365ff02a153d7295afb12",
   "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

@@ -27,7 +27,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 +46,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 +72,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);
 }
@@ -74,12 +95,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 +130,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/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`;
         },