@pixolith/webpack-sw6-config 9.0.0 → 10.0.0

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@pixolith/webpack-sw6-config",
   "public": true,
-  "version": "9.0.0",
+  "version": "10.0.0",
+  "type": "module",
   "description": "",
   "main": "src/index.js",
   "scripts": {},
@@ -21,7 +22,7 @@
     "url": "https://github.com/pixolith/webpack-plugins/issues"
   },
   "homepage": "https://github.com/pixolith/webpack-plugins/tree/master/packages/webpack-hook-plugin/#readme",
-  "gitHead": "07feda64fe1e987ef572a4ad06619712eccd4b6e",
+  "gitHead": "663cc0d270bfd9b70dac783a86d902c8969942e7",
   "dependencies": {
     "@babel/cli": "7.25.9",
     "@babel/core": "^7.26.0",
@@ -29,14 +30,14 @@
     "@babel/plugin-proposal-decorators": "7.25.9",
     "@babel/preset-env": "7.26.0",
     "@babel/preset-typescript": "7.26.0",
-    "@pixolith/eslint-config-sw6": "^9.0.0",
-    "@pixolith/external-svg-sprite-loader": "^9.0.0",
-    "@pixolith/stylelint-config-standard": "^9.0.0",
-    "@pixolith/webpack-assets-copy-plugin": "^9.0.0",
-    "@pixolith/webpack-filename-linter-plugin": "^9.0.0",
-    "@pixolith/webpack-hook-plugin": "^9.0.0",
-    "@pixolith/webpack-sw6-plugin-map-emitter": "^9.0.0",
-    "@pixolith/webpack-watcher": "^9.0.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",
     "@swc/core": "^1.9.3",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",

package/src/babel.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     presets: [
         ['@babel/preset-env', {
             useBuiltIns: 'entry',

package/src/config.js

@@ -1,10 +1,10 @@
 'use strict';
 
-const Path = require('path');
+import Path from 'path';
 
 const config = {
     isProd: process.env.NODE_ENV === 'production',
-    isDebug: !!process.env.DEBUG || true,
+    isDebug: !!process.env.DEBUG || false,
     shopwareMode: process.env.SHOPWARE_MODE,
 
     assetUrl: process.env.ASSET_URL || '/',
@@ -20,7 +20,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'),
@@ -48,7 +48,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-]*)`);
 
-module.exports = {
+export default {
     ...config,
     pluginSrcPath: Path.join(pluginSrcPath, pxEntryPath),
     pluginScssPath: Path.join(pluginSrcPath, pxEntryPath, config.scssFolder),

package/src/index.js

@@ -1,11 +1,11 @@
-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');
+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 setup = () => {
     watcher.clean(config);
@@ -36,7 +36,5 @@ const setup = () => {
 
 setup();
 
-module.exports = {
-    storefront: merge(dev, storefront, config.isProd ? production : {}),
-    administration: merge(dev, administration, config.isProd ? production : {}),
-};
+export const storefrontConfig = merge(dev, storefront, config.isProd ? production : {});
+export const administrationConfig = merge(dev, administration, config.isProd ? production : {});

package/src/postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     'plugins': {
         // to edit target browsers: use "browserslist" field in package.json
         'autoprefixer': {},

package/src/webpack.config.administration.js

@@ -1,14 +1,16 @@
-const config = require('./config');
+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 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'),
-    outputConfig = {
+const __dirname = import.meta.dirname;
+
+const outputConfig = {
         path: config.outputPath,
         publicPath: '/',
         filename: (chunkData) => {
@@ -35,7 +37,7 @@ const Path = require('path'),
         }
     }
 
-module.exports = {
+export default {
     entry: () => {
         let entriesPlugins = Entry(
             (filePath) =>

package/src/webpack.config.dev.js

@@ -1,19 +1,20 @@
-const config = require('./config');
+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 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');
+const __dirname = import.meta.dirname;
 
-module.exports = {
+export default {
     target: 'web',
     mode: 'development',
     resolve: {
@@ -23,11 +24,11 @@ module.exports = {
         ],
         alias: {
             src: Path.resolve(config.shopwarePluginPath),
+            vendor: Path.resolve(config.shopwareVendorPath),
         },
     },
     devtool: 'inline-cheap-module-source-map',
     module: {
-        // loader order is from right to left or from bottom to top depending on the notation but basicly always reverse
         rules: [
             {
                 test: /(\.scss|\.css)$/,
@@ -186,6 +187,7 @@ module.exports = {
                 process.env.NODE_ENV || 'development',
             ),
             'process.env.ASSET_URL': JSON.stringify(config.assetUrl),
+            'process.env.RESOURCES_PATHS': JSON.stringify(process.env.RESOURCES_PATHS || '[]'),
         }),
     ].concat(
         config.isProd && config.mediaQueries

package/src/webpack.config.production.js

@@ -1,68 +1,57 @@
-const config = require('./config'),
-    webpack = require('webpack'),
-    TerserPlugin = require('terser-webpack-plugin'),
-    CssMinimizerPlugin = require('css-minimizer-webpack-plugin'),
-    StyleLintPlugin = require('stylelint-webpack-plugin'),
-    Glob = require('glob'),
-    RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts'),
-    Path = require('path'),
-    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,
+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 }
                         },
+                    ],
+                },
+                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(),
-        ].concat(
-            //Glob.sync(Path.join(config.pluginSrcPath, '/**/*.s?(a|c)ss')).length
-            //    ? new StyleLintPlugin({
-            //        files: '**/Pxsw*/**/*.s?(a|c)ss',
-            //        failOnError: false,
-            //        fix: false,
-            //        configFile: Path.join(__dirname, 'stylelint.config.js'),
-            //    })
-            //    : [],
-            []
-        ),
-        stats: 'normal',
-    };
+        ],
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env': {
+                NODE_ENV: '"production"',
+            },
+        }),
+        new RemoveEmptyScriptsPlugin(),
+    ].concat(
+        []
+    ),
+    stats: 'normal',
+};
 
-module.exports = productionConfig;
+export default productionConfig;

package/src/webpack.config.storefront.js

@@ -1,80 +1,75 @@
-const config = require('./config');
+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 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`;
-        },
+const outputConfig = {
+    path: config.outputPath,
+    publicPath: config.assetUrl,
+    chunkFilename: (chunkData) => {
+        return `js/chunk[name]${config.isProd ? '.[contenthash]' : ''}.js`;
     },
-    miniCssChunksConfig = {
-        filename: `css/[name]${
-            config.isProd ? '.[contenthash]' : ''
-        }.css`,
-        chunkFilename: `css/[name].vendor${
-            config.isProd ? '.[contenthash]' : ''
-        }.css`
-    };
+    filename: (chunkData) => {
+        return `js/${chunkData.chunk.name.toLowerCase()}${config.isProd ? `.[contenthash]` : ''}.js`;
+    },
+};
 
-module.exports = {
+const miniCssChunksConfig = {
+    filename: `css/[name]${config.isProd ? '.[contenthash]' : ''}.css`,
+    chunkFilename: `css/[name].vendor${config.isProd ? '.[contenthash]' : ''}.css`
+};
+
+export default {
     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 };
+        //return {...entriesPlugins, ...entriesVendor, ...routeSplitEntriesPlugins, ...routeSplitEntriesVendor, ...coreEntries, ...pluginEntries};
+        return {...entriesPlugins, ...entriesVendor, ...routeSplitEntriesPlugins, ...routeSplitEntriesVendor};
     },
     module: {
-        // loader order is from right to left or from bottom to top depending on the notation but basicly always reverse
         rules: [
             {
                 test: /\.js$/,
-                exclude: (file) => {
-                    return /node_modules/.test(file);
-                },
+                exclude: (file) => /node_modules/.test(file),
                 use: [
                     {
                         loader: 'swc-loader',
@@ -83,7 +78,7 @@ module.exports = {
                                 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: require('browserslist').loadConfig({
+                                targets: browserList.loadConfig({
                                     config: './package.json',
                                 }),
                             },
@@ -162,9 +157,7 @@ module.exports = {
             includes: ['js', 'css'],
             ignoreFiles: [/.*icons.*\.js/, /.*chunk.*\.js/],
         }),
-
         new SvgStorePlugin(),
-
         new MiniCssExtractPlugin(miniCssChunksConfig),
     ],
 };