@pixolith/webpack-sw6-config 10.0.0 → 11.0.0

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@pixolith/webpack-sw6-config",
   "public": true,
-  "version": "10.0.0",
-  "type": "module",
+  "version": "11.0.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {},
@@ -22,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": "663cc0d270bfd9b70dac783a86d902c8969942e7",
+  "gitHead": "d0ba47858dc6ddfeaadceaecea5ea59e97c96717",
   "dependencies": {
     "@babel/cli": "7.25.9",
     "@babel/core": "^7.26.0",
@@ -30,14 +29,15 @@
     "@babel/plugin-proposal-decorators": "7.25.9",
     "@babel/preset-env": "7.26.0",
     "@babel/preset-typescript": "7.26.0",
-    "@pixolith/eslint-config-sw6": "^10.0.0",
-    "@pixolith/external-svg-sprite-loader": "^10.0.0",
-    "@pixolith/stylelint-config-standard": "^10.0.0",
-    "@pixolith/webpack-assets-copy-plugin": "^10.0.0",
-    "@pixolith/webpack-filename-linter-plugin": "^10.0.0",
-    "@pixolith/webpack-hook-plugin": "^10.0.0",
-    "@pixolith/webpack-sw6-plugin-map-emitter": "^10.0.0",
-    "@pixolith/webpack-watcher": "^10.0.0",
+    "@pixolith/eslint-config-sw6": "^11.0.0",
+    "@pixolith/external-svg-sprite-loader": "^11.0.0",
+    "@pixolith/stylelint-config-standard": "^11.0.0",
+    "@pixolith/webpack-assets-copy-plugin": "^11.0.0",
+    "@pixolith/webpack-filename-linter-plugin": "^11.0.0",
+    "@pixolith/webpack-hook-plugin": "^11.0.0",
+    "@pixolith/webpack-sw6-plugin-map-emitter": "^11.0.0",
+    "@pixolith/webpack-twig-assets-emitter-plugin": "^11.0.0",
+    "@pixolith/webpack-watcher": "^11.0.0",
     "@swc/core": "^1.9.3",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",

package/src/config.js

@@ -1,11 +1,12 @@
 'use strict';
 
-import Path from 'path';
+const Path = require('path');
 
 const config = {
     isProd: process.env.NODE_ENV === 'production',
     isDebug: !!process.env.DEBUG || false,
     shopwareMode: process.env.SHOPWARE_MODE,
+    shopwareVersion: process.env.SHOPWARE_VERSION || '6.6',
 
     assetUrl: process.env.ASSET_URL || '/',
     pluginPrefixes: process.env.PLUGIN_PREFIXES || 'Pxsw',
@@ -20,7 +21,7 @@ const config = {
 
     mediaQueries: process.env.MEDIA_QUERIES || false,
 
-    outputPath: Path.join(process.cwd(), process.env.PUBLIC_PATH ?? ''),
+    outputPath: Path.join(process.cwd(), process.env.PUBLIC_PATH),
 
     vendorBasePath: Path.join(process.cwd(), 'vendor'),
     pluginsBasePath: Path.join(process.cwd(), 'custom/plugins'),
@@ -31,13 +32,11 @@ const config = {
     shopwareVendorPath: Path.join(process.cwd(), 'vendor/shopware/storefront/Resources/app/storefront/vendor'),
     shopwarePluginPath: Path.join(process.cwd(), 'vendor/shopware/storefront/Resources/app/storefront/src'),
 
-    spriteOutputPath: Path.join(process.cwd(), 'custom/plugins/PxswTheme/src/Resources/views'),
-
     allowedExtensions: ['.ts', '.js', '.scss', '.css', '.svg']
 }
 
-const pxEntryPath = process.env.PX_ENTRY_PATH || process.env.SHOPWARE_MODE === 'storefront' ? 'src/Resources/app/storefront/private' : 'src/Resources/app/administration/src';
-const pxRouteSplitPath = process.env.PX_ROUTE_SPLIT_PATH || process.env.SHOPWARE_MODE === 'storefront' ? 'src/Resources/app/storefront/private/scss-route-split/*' : '';
+const pxEntryPath = process.env.PX_ENTRY_PATH || (process.env.SHOPWARE_MODE === 'storefront' ? 'src/Resources/app/storefront/private' : 'src/Resources/app/administration/src');
+const pxRouteSplitPath = process.env.PX_ROUTE_SPLIT_PATH || (process.env.SHOPWARE_MODE === 'storefront' ? 'src/Resources/app/storefront/private/scss-route-split/*' : '');
 
 // Create a glob regex to match the plugin prefixes
 let prefixes = config.pluginPrefixes.split(',').map(p => `${p}*`).join('|');
@@ -48,7 +47,7 @@ const pluginMatch = new RegExp(`/plugins\/((${config.pluginPrefixes.replace(',',
 const vendorMatch = new RegExp(`/(vendor\/(${config.pluginPrefixes.replace(',', '|').toLowerCase()})\/[\\w-]*)\/`);
 const routeSplitMatch = new RegExp(`/scss-route-split\/([\\w-]*)`);
 
-export default {
+module.exports = {
     ...config,
     pluginSrcPath: Path.join(pluginSrcPath, pxEntryPath),
     pluginScssPath: Path.join(pluginSrcPath, pxEntryPath, config.scssFolder),

package/src/index.js

@@ -1,11 +1,11 @@
-import config from './config.js';
-import production from './webpack.config.production.js';
-import storefront from './webpack.config.storefront.js';
-import dev from './webpack.config.dev.js';
-import administration from './webpack.config.administration.js';
-import pkg from './../package.json' assert { type: 'json' };
-import watcher from '@pixolith/webpack-watcher';
-import {merge} from 'webpack-merge';
+const config = require('./config');
+const production = require('./webpack.config.production');
+const storefront = require('./webpack.config.storefront');
+const dev = require('./webpack.config.dev');
+const administration = require('./webpack.config.administration');
+const pkg = require('./../package.json');
+const watcher = require('@pixolith/webpack-watcher');
+const { merge } = require('webpack-merge');
 
 const setup = () => {
     watcher.clean(config);
@@ -36,5 +36,7 @@ const setup = () => {
 
 setup();
 
-export const storefrontConfig = merge(dev, storefront, config.isProd ? production : {});
-export const administrationConfig = merge(dev, administration, config.isProd ? production : {});
+module.exports = {
+    storefront: merge(dev, storefront, config.isProd ? production : {}),
+    administration: merge(dev, administration, config.isProd ? production : {}),
+};

package/src/webpack.config.administration.js

@@ -1,43 +1,40 @@
-import config from './config.js';
-import Path from 'path';
-import Fs from 'fs';
-import Entry from 'webpack-glob-entry';
-import * as ChangeCase from 'change-case';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import Consola from 'consola';
-import AssetsCopyPlugin from '@pixolith/webpack-assets-copy-plugin';
-import SvgStorePlugin from '@pixolith/external-svg-sprite-loader';
+const config = require('./config');
 
-const __dirname = import.meta.dirname;
-
-const outputConfig = {
+const Path = require('path'),
+    Fs = require('fs'),
+    Entry = require('webpack-glob-entry'),
+    ChangeCase = require('change-case'),
+    MiniCssExtractPlugin = require('mini-css-extract-plugin'),
+    Consola = require('consola'),
+    AssetsCopyPlugin = require('@pixolith/webpack-assets-copy-plugin'),
+    SvgStorePlugin = require('@pixolith/external-svg-sprite-loader'),
+    TwigAssetEmitterPlugin = require('@pixolith/webpack-twig-assets-emitter-plugin'),
+    outputConfig = {
         path: config.outputPath,
         publicPath: '/',
         filename: (chunkData) => {
-            let pluginName = chunkData.chunk.name
-                .toLowerCase()
-                .replace('vendor-', '')
-                .replace('pxsw-pxsw-', 'pxsw-');
-            return `${pluginName.replace(
-                /-/g,
-                '',
-            )}/administration/js/${pluginName}.js`;
+            let pluginName = chunkData.chunk.name.toLowerCase().replace('pxsw-pxsw-', 'pxsw-');
+            pluginName = config.shopwareVersion === '6.6' ? pluginName.replace('vendor-', '') : pluginName;
+            return config.shopwareVersion === '6.6' ?
+                `${pluginName.replace(/-/g, '',)}/administration/js/${pluginName}.js` :
+                `js/${pluginName}${
+                    config.isProd ? '.admin.[contenthash]' : ''
+                }.js`;
         }
     },
     miniCssChunksConfig = {
         filename: (chunkData) => {
-            let pluginName = chunkData.chunk.name
-                .toLowerCase()
-                .replace('vendor-', '')
-                .replace('pxsw-pxsw-', 'pxsw-');
-            return `${pluginName.replace(
-                /-/g,
-                '',
-            )}/administration/css/${pluginName}.css`;
+            let pluginName = chunkData.chunk.name.toLowerCase().replace('pxsw-pxsw-', 'pxsw-');
+            pluginName = config.shopwareVersion === '6.6' ? pluginName.replace('vendor-', '') : pluginName;
+            return config.shopwareVersion === '6.6' ?
+                `${pluginName.replace(/-/g, '',)}/administration/css/${pluginName}.css` :
+                `css/${pluginName}${
+                    config.isProd ? '.admin.[contenthash]' : ''
+                }.css`;
         }
     }
 
-export default {
+module.exports = {
     entry: () => {
         let entriesPlugins = Entry(
             (filePath) =>
@@ -60,12 +57,9 @@ export default {
             console.table({...entriesPlugins, ...entriesVendor });
         }
 
-        console.table({...entriesPlugins, ...entriesVendor });
-
         return {...entriesPlugins, ...entriesVendor };
     },
     module: {
-        // loader order is from right to left or from bottom to top depending on the notation but basicly always reverse
         rules: [
             {
                 test: /\.js$/,
@@ -135,7 +129,7 @@ export default {
         new SvgStorePlugin(),
         new MiniCssExtractPlugin(miniCssChunksConfig),
     ].concat(
-        config.isProd ?
+        config.isProd && config.shopwareVersion === '6.6' ?
             new AssetsCopyPlugin({
                 includes: ['js', 'css'],
                 ignoreFiles: [/[-\w.]*.hot-update.js/],
@@ -168,6 +162,17 @@ export default {
                     },
                 ],
             }) : [],
+    ).concat(
+        config.isProd && config.shopwareVersion !== '6.6' ?
+        new TwigAssetEmitterPlugin({
+            includes: ['js', 'css'],
+            ignoreFiles: [/.*icons.*\.js/],
+            template: {
+                admin: {
+                    filename: 'index.html.twig',
+                },
+            },
+        }) : [],
     ),
 
     optimization: {

package/src/webpack.config.dev.js

@@ -1,20 +1,19 @@
-import config from './config.js';
-import webpack from 'webpack';
-import Path from 'path';
-import Consola from 'consola';
-import Fs from 'fs';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import MediaQueryPlugin from 'media-query-plugin';
-import ESLintPlugin from 'eslint-webpack-plugin';
-import watcher from '@pixolith/webpack-watcher';
-import * as Glob from 'glob';
-import HookPlugin from '@pixolith/webpack-hook-plugin';
-import * as Sass from 'sass';
-import TimeFixPlugin from 'time-fix-plugin';
+const config = require('./config');
 
-const __dirname = import.meta.dirname;
+const webpack = require('webpack'),
+    Path = require('path'),
+    Consola = require('consola'),
+    Fs = require('fs'),
+    MiniCssExtractPlugin = require('mini-css-extract-plugin'),
+    MediaQueryPlugin = require('media-query-plugin'),
+    ESLintPlugin = require('eslint-webpack-plugin'),
+    watcher = require('@pixolith/webpack-watcher'),
+    Glob = require('glob'),
+    HookPlugin = require('@pixolith/webpack-hook-plugin'),
+    Sass = require('sass'),
+    TimeFixPlugin = require('time-fix-plugin');
 
-export default {
+module.exports = {
     target: 'web',
     mode: 'development',
     resolve: {

package/src/webpack.config.production.js

@@ -1,57 +1,54 @@
-import webpack from 'webpack';
-import TerserPlugin from 'terser-webpack-plugin';
-import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
-import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts';
-
-const productionConfig = {
-    devtool: 'nosources-source-map',
-    performance: {
-        maxEntrypointSize: 300000,
-        maxAssetSize: 250000,
-        hints: 'warning',
-    },
-    mode: 'production',
-    optimization: {
-        splitChunks: false,
-        runtimeChunk: false,
-        minimizer: [
-            new CssMinimizerPlugin({
-                minimizerOptions: {
-                    preset: [
-                        "default",
-                        {
-                            zIndex: false,
-                            discardComments: { removeAll: true }
+const webpack = require('webpack'),
+    TerserPlugin = require('terser-webpack-plugin'),
+    CssMinimizerPlugin = require('css-minimizer-webpack-plugin'),
+    RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts'),
+    productionConfig = {
+        devtool: 'nosources-source-map',
+        performance: {
+            maxEntrypointSize: 300000,
+            maxAssetSize: 250000,
+            hints: 'warning',
+        },
+        mode: 'production',
+        optimization: {
+            splitChunks: false,
+            runtimeChunk: false,
+            minimizer: [
+                new CssMinimizerPlugin({
+                    minimizerOptions: {
+                        preset: [
+                            "default",
+                            {
+                                zIndex: false,
+                                discardComments: { removeAll: true }
+                            },
+                        ],
+                    },
+                    minify: [
+                        CssMinimizerPlugin.cssnanoMinify,
+                    ]
+                }),
+                new TerserPlugin({
+                    minify: TerserPlugin.swcMinify,
+                    terserOptions: {
+                        compress: {
+                            drop_console: true,
                         },
-                    ],
-                },
-                minify: [
-                    CssMinimizerPlugin.cssnanoMinify,
-                ]
-            }),
-            new TerserPlugin({
-                minify: TerserPlugin.swcMinify,
-                terserOptions: {
-                    compress: {
-                        drop_console: true,
                     },
+                    parallel: true,
+                    extractComments: false,
+                }),
+            ],
+        },
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env': {
+                    NODE_ENV: '"production"',
                 },
-                parallel: true,
-                extractComments: false,
             }),
+            new RemoveEmptyScriptsPlugin(),
         ],
-    },
-    plugins: [
-        new webpack.DefinePlugin({
-            'process.env': {
-                NODE_ENV: '"production"',
-            },
-        }),
-        new RemoveEmptyScriptsPlugin(),
-    ].concat(
-        []
-    ),
-    stats: 'normal',
-};
+        stats: 'normal',
+    };
 
-export default productionConfig;
+module.exports = productionConfig;

package/src/webpack.config.storefront.js

@@ -1,75 +1,79 @@
-import config from './config.js';
-import Path from 'path';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import * as  ChangeCase from 'change-case';
-import Consola from 'consola';
-import Sw6PluginMapEmitterPlugin from '@pixolith/webpack-sw6-plugin-map-emitter';
-import Entry from 'webpack-glob-entry';
-import SvgStorePlugin from '@pixolith/external-svg-sprite-loader';
-import browserList from 'browserslist';
+const config = require('./config');
 
-const outputConfig = {
-    path: config.outputPath,
-    publicPath: config.assetUrl,
-    chunkFilename: (chunkData) => {
-        return `js/chunk[name]${config.isProd ? '.[contenthash]' : ''}.js`;
+const Path = require('path'),
+    MiniCssExtractPlugin = require('mini-css-extract-plugin'),
+    ChangeCase = require('change-case'),
+    Consola = require('consola'),
+    Sw6PluginMapEmitterPlugin = require('@pixolith/webpack-sw6-plugin-map-emitter'),
+    Entry = require('webpack-glob-entry'),
+    SvgStorePlugin = require('@pixolith/external-svg-sprite-loader'),
+    outputConfig = {
+        path: config.outputPath,
+        publicPath: config.assetUrl,
+        chunkFilename: (chunkData) => {
+            return `js/chunk[name]${
+                config.isProd ? '.[contenthash]' : ''
+            }.js`;
+        },
+        filename: (chunkData) => {
+            return `js/${chunkData.chunk.name.toLowerCase()}${
+                config.isProd ? `.[contenthash]` : ''
+            }.js`;
+        },
     },
-    filename: (chunkData) => {
-        return `js/${chunkData.chunk.name.toLowerCase()}${config.isProd ? `.[contenthash]` : ''}.js`;
-    },
-};
+    miniCssChunksConfig = {
+        filename: `css/[name]${
+            config.isProd ? '.[contenthash]' : ''
+        }.css`,
+        chunkFilename: `css/[name].vendor${
+            config.isProd ? '.[contenthash]' : ''
+        }.css`
+    };
 
-const miniCssChunksConfig = {
-    filename: `css/[name]${config.isProd ? '.[contenthash]' : ''}.css`,
-    chunkFilename: `css/[name].vendor${config.isProd ? '.[contenthash]' : ''}.css`
-};
-
-export default {
+module.exports = {
     entry: () => {
         let entriesPlugins = Entry(
-            (filePath) => ChangeCase.kebabCase(filePath.match(config.pluginMatch)[1]),
-            Path.resolve(config.pluginSrcPath, 'index.js')
+            (filePath) =>
+                ChangeCase.kebabCase(
+                    filePath.match(config.pluginMatch)[1],
+                ),
+            Path.resolve(config.pluginSrcPath, 'index.js'),
         );
 
         let entriesVendor = Entry(
-            (filePath) => ChangeCase.kebabCase(filePath.match(config.vendorMatch)[1]),
-            Path.resolve(config.vendorSrcPath, 'index.js')
+            (filePath) =>
+                ChangeCase.kebabCase(
+                    filePath.match(config.vendorMatch)[1],
+                ),
+            Path.resolve(config.vendorSrcPath, 'index.js'),
         );
 
         let routeSplitEntriesPlugins = Entry(
             (filePath) => filePath.split('/').pop().replace('.index.scss', '').replace('.', '_'),
-            Path.resolve(config.pluginRouteSplitPath, '*index.scss')
+            Path.resolve(config.pluginRouteSplitPath, '*index.scss'),
         );
-
         let routeSplitEntriesVendor = Entry(
-            (filePath) => ChangeCase.paramCase(filePath.match(config.vendorMatch)[1]),
-            Path.resolve(config.vendorRouteSplitPath, 'route-splitting/*/*index.scss')
+            (filePath) =>
+                ChangeCase.paramCase(
+                    filePath.match(config.vendorMatch)[1],
+                ),
+            Path.resolve(config.vendorRouteSplitPath, 'route-splitting/*/*index.scss'),
         );
 
-        //let coreEntries = Entry(
-        //    (filePath) => 'storefront',
-        //    Path.resolve('vendor/shopware/storefront/Resources/app/storefront/src/scss', 'base.scss')
-        //);
-
-        //let match = new RegExp(`vendor\/store.shopware.com\/([\\w-]*)\/`);
-        //let pluginEntries = Entry(
-        //    (filePath) => filePath.match(match)[1].toLowerCase(),
-        //    Path.resolve('vendor/store.shopware.com/*/src/Resources/app/storefront/src/scss', 'base.scss')
-        //);
-
         if (config.isDebug) {
             Consola.info('[DEBUG]: Webpack entry points:');
-            console.table({...entriesPlugins, ...entriesVendor, ...routeSplitEntriesPlugins, ...routeSplitEntriesVendor});
+            console.table({ ...entriesPlugins, ...entriesVendor, ...routeSplitEntriesPlugins, ...routeSplitEntriesVendor });
         }
 
-        //return {...entriesPlugins, ...entriesVendor, ...routeSplitEntriesPlugins, ...routeSplitEntriesVendor, ...coreEntries, ...pluginEntries};
-        return {...entriesPlugins, ...entriesVendor, ...routeSplitEntriesPlugins, ...routeSplitEntriesVendor};
+        return { ...entriesPlugins, ...entriesVendor, ...routeSplitEntriesPlugins, ...routeSplitEntriesVendor };
     },
     module: {
         rules: [
             {
                 test: /\.js$/,
-                exclude: (file) => /node_modules/.test(file),
+                exclude: (file) => {
+                    return /node_modules/.test(file);
+                },
                 use: [
                     {
                         loader: 'swc-loader',
@@ -78,7 +82,7 @@ export default {
                                 mode: 'entry',
                                 coreJs: '3.34.0',
                                 // .browserlist settings are not found by swc-loader, so we load it manually: https://github.com/swc-project/swc/issues/3365
-                                targets: browserList.loadConfig({
+                                targets: require('browserslist').loadConfig({
                                     config: './package.json',
                                 }),
                             },
@@ -157,7 +161,9 @@ export default {
             includes: ['js', 'css'],
             ignoreFiles: [/.*icons.*\.js/, /.*chunk.*\.js/],
         }),
+
         new SvgStorePlugin(),
+
         new MiniCssExtractPlugin(miniCssChunksConfig),
     ],
 };