@pixolith/webpack-sw6-config 8.2.1 → 10.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/package.json +56 -54
  2. package/src/babel.config.js +1 -1
  3. package/src/config.js +75 -0
  4. package/src/index.js +34 -28
  5. package/src/postcss.config.js +1 -1
  6. package/src/webpack.config.administration.js +29 -30
  7. package/src/webpack.config.dev.js +40 -63
  8. package/src/webpack.config.production.js +52 -60
  9. package/src/webpack.config.storefront.js +58 -74
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "@pixolith/webpack-sw6-config",
3
3
  "public": true,
4
- "version": "8.2.1",
4
+ "version": "10.0.0",
5
+ "type": "module",
5
6
  "description": "",
6
7
  "main": "src/index.js",
7
8
  "scripts": {},
@@ -21,77 +22,78 @@
21
22
  "url": "https://github.com/pixolith/webpack-plugins/issues"
22
23
  },
23
24
  "homepage": "https://github.com/pixolith/webpack-plugins/tree/master/packages/webpack-hook-plugin/#readme",
24
- "gitHead": "6046f841d90f2b07103b725e196e0e9c7091714d",
25
+ "gitHead": "663cc0d270bfd9b70dac783a86d902c8969942e7",
25
26
  "dependencies": {
26
- "@babel/cli": "7.23.4",
27
- "@babel/core": "^7.23.7",
28
- "@babel/eslint-parser": "^7.23.3",
29
- "@babel/plugin-proposal-decorators": "7.23.7",
30
- "@babel/preset-env": "7.23.7",
31
- "@babel/preset-typescript": "7.23.3",
32
- "@pixolith/eslint-config-sw6": "^8.0.0",
33
- "@pixolith/external-svg-sprite-loader": "^8.2.1",
34
- "@pixolith/stylelint-config-standard": "^8.0.0",
35
- "@pixolith/webpack-assets-copy-plugin": "^8.0.0",
36
- "@pixolith/webpack-filename-linter-plugin": "^8.0.0",
37
- "@pixolith/webpack-hook-plugin": "^8.0.0",
38
- "@pixolith/webpack-sw6-plugin-map-emitter": "^8.1.6",
39
- "@pixolith/webpack-watcher": "^8.1.6",
40
- "@swc/core": "^1.7.0",
41
- "autoprefixer": "^10.4.14",
42
- "babel-loader": "^9.1.2",
43
- "change-case": "^4.1.2",
44
- "chokidar": "^3.5.3",
45
- "concurrently": "^8.1.0",
46
- "consola": "^3.1.0",
47
- "core-js": "^3.30.2",
27
+ "@babel/cli": "7.25.9",
28
+ "@babel/core": "^7.26.0",
29
+ "@babel/eslint-parser": "^7.25.9",
30
+ "@babel/plugin-proposal-decorators": "7.25.9",
31
+ "@babel/preset-env": "7.26.0",
32
+ "@babel/preset-typescript": "7.26.0",
33
+ "@pixolith/eslint-config-sw6": "^10.0.0",
34
+ "@pixolith/external-svg-sprite-loader": "^10.0.0",
35
+ "@pixolith/stylelint-config-standard": "^10.0.0",
36
+ "@pixolith/webpack-assets-copy-plugin": "^10.0.0",
37
+ "@pixolith/webpack-filename-linter-plugin": "^10.0.0",
38
+ "@pixolith/webpack-hook-plugin": "^10.0.0",
39
+ "@pixolith/webpack-sw6-plugin-map-emitter": "^10.0.0",
40
+ "@pixolith/webpack-watcher": "^10.0.0",
41
+ "@swc/core": "^1.9.3",
42
+ "autoprefixer": "^10.4.20",
43
+ "babel-loader": "^9.2.1",
44
+ "change-case": "^5.4.4",
45
+ "chokidar": "^4.0.1",
46
+ "concurrently": "^9.1.0",
47
+ "consola": "^3.2.3",
48
+ "core-js": "^3.39.0",
48
49
  "cross-env": "^7.0.3",
49
- "css-loader": "^6.8.1",
50
- "css-minimizer-webpack-plugin": "^5.0.0",
51
- "cssnano-preset-advanced": "^6.0.1",
50
+ "css-loader": "^7.1.2",
51
+ "css-minimizer-webpack-plugin": "^7.0.0",
52
+ "cssnano-preset-advanced": "^7.0.6",
52
53
  "deepmerge": "^4.3.1",
53
- "eslint": "^8.42.0",
54
+ "eslint": "^9.15.0",
54
55
  "eslint-friendly-formatter": "^4.0.1",
55
56
  "eslint-plugin-filenames": "^1.3.2",
56
57
  "eslint-plugin-spellcheck": "0.0.20",
57
- "eslint-webpack-plugin": "^4.0.1",
58
- "execa": "^7.1.1",
58
+ "eslint-webpack-plugin": "^4.2.0",
59
+ "execa": "^9.5.1",
59
60
  "external-svg-sprite-loader": "^7.2.0",
60
61
  "file-loader": "^6.2.0",
61
- "glob": "^10.2.7",
62
- "html-loader": "^4.2.0",
62
+ "glob": "^11.0.0",
63
+ "html-loader": "^5.1.0",
63
64
  "media-query-plugin": "^1.5.0",
64
- "mini-css-extract-plugin": "^2.8.1",
65
- "postcss": "^8.4.24",
66
- "postcss-loader": "^7.3.2",
67
- "postcss-pxtorem": "^6.0.0",
68
- "postcss-scss": "^4.0.6",
69
- "prettier": "^2.8.8",
65
+ "mini-css-extract-plugin": "^2.9.2",
66
+ "postcss": "^8.4.49",
67
+ "postcss-loader": "^8.1.1",
68
+ "postcss-pxtorem": "^6.1.0",
69
+ "postcss-scss": "^4.0.9",
70
+ "prettier": "^3.4.1",
70
71
  "resolve-url-loader": "^5.0.0",
71
- "rimraf": "^5.0.1",
72
- "sass": "^1.62.1",
73
- "sass-loader": "^13.3.1",
72
+ "rimraf": "^6.0.1",
73
+ "sass": "^1.81.0",
74
+ "sass-loader": "^16.0.3",
74
75
  "sass-resources-loader": "^2.2.5",
75
76
  "string-replace-loader": "^3.1.0",
76
- "style-loader": "^3.3.3",
77
- "stylelint": "^15.7.0",
78
- "stylelint-config-standard": "^33.0.0",
79
- "stylelint-config-standard-scss": "^9.0.0",
80
- "stylelint-prettier": "^3.0.0",
81
- "stylelint-webpack-plugin": "^4.1.1",
77
+ "style-loader": "^4.0.0",
78
+ "stylelint": "^16.10.0",
79
+ "stylelint-config-standard": "^36.0.1",
80
+ "stylelint-config-standard-scss": "^13.1.0",
81
+ "stylelint-prettier": "^5.0.2",
82
+ "stylelint-webpack-plugin": "^5.0.1",
82
83
  "svg-sprite-loader": "^6.0.11",
83
84
  "svg-transform-loader": "^2.0.13",
84
85
  "svgo-loader": "^4.0.0",
85
- "swc-loader": "^0.2.3",
86
- "terser-webpack-plugin": "^5.3.9",
86
+ "swc-loader": "^0.2.6",
87
+ "terser-webpack-plugin": "^5.3.10",
87
88
  "time-fix-plugin": "^2.0.7",
88
89
  "url-loader": "^4.1.1",
89
- "webpack": "^5.85.1",
90
- "webpack-cli": "^5.1.3",
91
- "webpack-dev-server": "^4.15.0",
90
+ "webpack": "^5.96.1",
91
+ "webpack-cli": "^5.1.4",
92
+ "webpack-dev-server": "^5.1.0",
92
93
  "webpack-glob-entry": "^2.1.1",
93
- "webpack-merge": "^5.9.0",
94
- "webpackbar": "^5.0.2",
94
+ "webpack-merge": "^6.0.1",
95
+ "webpack-remove-empty-scripts": "^1.0.4",
96
+ "webpackbar": "^7.0.0",
95
97
  "write-file-webpack-plugin": "^4.5.1"
96
98
  }
97
99
  }
package/src/babel.config.js CHANGED
@@ -1,4 +1,4 @@
1
- module.exports = {
1
+ export default {
2
2
  presets: [
3
3
  ['@babel/preset-env', {
4
4
  useBuiltIns: 'entry',
package/src/config.js ADDED
@@ -0,0 +1,75 @@
1
+ 'use strict';
2
+
3
+ import Path from 'path';
4
+
5
+ const config = {
6
+ isProd: process.env.NODE_ENV === 'production',
7
+ isDebug: !!process.env.DEBUG || false,
8
+ shopwareMode: process.env.SHOPWARE_MODE,
9
+
10
+ assetUrl: process.env.ASSET_URL || '/',
11
+ pluginPrefixes: process.env.PLUGIN_PREFIXES || 'Pxsw',
12
+
13
+ pxSharedPath: process.env.SHARED_SCSS_PATH || '../../shared',
14
+ scssFolder: process.env.SCSS_FOLDER || 'scss',
15
+ jsFolder: process.env.JS_FOLDER || 'js',
16
+ iconsFolder: process.env.ICONS_FOLDER || 'icons',
17
+
18
+ spriteOrder: process.env.SPRITE_ORDER ?? ['pxsw/basic-theme', 'PxswBasicTheme', '**', 'pxsw/customer-theme', 'PxswCustomerTheme'],
19
+ ignoreIcons: process.env.IGNORE_ICONS ?? [],
20
+
21
+ mediaQueries: process.env.MEDIA_QUERIES || false,
22
+
23
+ outputPath: Path.join(process.cwd(), process.env.PUBLIC_PATH ?? ''),
24
+
25
+ vendorBasePath: Path.join(process.cwd(), 'vendor'),
26
+ pluginsBasePath: Path.join(process.cwd(), 'custom/plugins'),
27
+
28
+ pluginsPublicPath: Path.join(process.cwd(), 'public'),
29
+ vendorPublicPath: Path.join(process.cwd(), 'public/bundles'),
30
+
31
+ shopwareVendorPath: Path.join(process.cwd(), 'vendor/shopware/storefront/Resources/app/storefront/vendor'),
32
+ shopwarePluginPath: Path.join(process.cwd(), 'vendor/shopware/storefront/Resources/app/storefront/src'),
33
+
34
+ spriteOutputPath: Path.join(process.cwd(), 'custom/plugins/PxswTheme/src/Resources/views'),
35
+
36
+ allowedExtensions: ['.ts', '.js', '.scss', '.css', '.svg']
37
+ }
38
+
39
+ const pxEntryPath = process.env.PX_ENTRY_PATH || process.env.SHOPWARE_MODE === 'storefront' ? 'src/Resources/app/storefront/private' : 'src/Resources/app/administration/src';
40
+ const pxRouteSplitPath = process.env.PX_ROUTE_SPLIT_PATH || process.env.SHOPWARE_MODE === 'storefront' ? 'src/Resources/app/storefront/private/scss-route-split/*' : '';
41
+
42
+ // Create a glob regex to match the plugin prefixes
43
+ let prefixes = config.pluginPrefixes.split(',').map(p => `${p}*`).join('|');
44
+ const pluginSrcPath = Path.join(config.pluginsBasePath, `+(${prefixes})`);
45
+ const vendorSrcPath = Path.join(config.vendorBasePath, `+(${config.pluginPrefixes.replace(',', '|').toLowerCase()})`, '*');
46
+
47
+ const pluginMatch = new RegExp(`/plugins\/((${config.pluginPrefixes.replace(',', '|')})\\w*)\/`);
48
+ const vendorMatch = new RegExp(`/(vendor\/(${config.pluginPrefixes.replace(',', '|').toLowerCase()})\/[\\w-]*)\/`);
49
+ const routeSplitMatch = new RegExp(`/scss-route-split\/([\\w-]*)`);
50
+
51
+ export default {
52
+ ...config,
53
+ pluginSrcPath: Path.join(pluginSrcPath, pxEntryPath),
54
+ pluginScssPath: Path.join(pluginSrcPath, pxEntryPath, config.scssFolder),
55
+ pluginJsPath: Path.join(pluginSrcPath, pxEntryPath, config.jsFolder),
56
+
57
+ vendorSrcPath: Path.join(vendorSrcPath, pxEntryPath),
58
+ vendorScssPath: Path.join(vendorSrcPath, pxEntryPath, config.scssFolder),
59
+ vendorJsPath: Path.join(vendorSrcPath, pxEntryPath, config.jsFolder),
60
+
61
+ pluginMatch: pluginMatch,
62
+ vendorMatch: vendorMatch,
63
+
64
+ sharedScssPluginPath: Path.join(pluginSrcPath, pxEntryPath, config.pxSharedPath, config.scssFolder),
65
+ sharedScssVendorPath: Path.join(vendorSrcPath, pxEntryPath, config.pxSharedPath, config.scssFolder),
66
+
67
+ sharedIconPluginPath: Path.join(pluginSrcPath, pxEntryPath, config.pxSharedPath, config.iconsFolder),
68
+ sharedIconVendorPath: Path.join(vendorSrcPath, pxEntryPath, config.pxSharedPath, config.iconsFolder),
69
+
70
+ routeSplitMatch: routeSplitMatch,
71
+ pluginRouteSplitPath: Path.join(pluginSrcPath, pxRouteSplitPath),
72
+ vendorRouteSplitPath: Path.join(vendorSrcPath, pxRouteSplitPath),
73
+
74
+ resourcesPath: process.env.RESOURCES_PATHS
75
+ }
package/src/index.js CHANGED
@@ -1,34 +1,40 @@
1
- const production = require('./webpack.config.production');
2
- const storefront = require('./webpack.config.storefront');
3
- const dev = require('./webpack.config.dev');
4
- const administration = require('./webpack.config.administration');
5
- const isProd = process.env.NODE_ENV === 'production';
6
- const pkg = require('./../package.json');
7
- const watcher = require('@pixolith/webpack-watcher');
8
- const { merge } = require('webpack-merge');
9
- const Consola = require('consola');
1
+ import config from './config.js';
2
+ import production from './webpack.config.production.js';
3
+ import storefront from './webpack.config.storefront.js';
4
+ import dev from './webpack.config.dev.js';
5
+ import administration from './webpack.config.administration.js';
6
+ import pkg from './../package.json' assert { type: 'json' };
7
+ import watcher from '@pixolith/webpack-watcher';
8
+ import {merge} from 'webpack-merge';
10
9
 
11
10
  const setup = () => {
12
- Consola.info('Cleaning output folder');
13
- watcher.clean();
14
- watcher.run();
15
- console.table({
16
- isProd: isProd,
17
- pluginPath: process.env.PLUGIN_PATH,
18
- vendorPath: process.env.VENDOR_PATH,
19
- publicPath: process.env.PUBLIC_PATH,
20
- sharedAssetPath: process.env.SHARED_SCSS_PATH,
21
- shopwareMode: process.env.SHOPWARE_MODE,
22
- globalResourcesPaths: process.env.RESOURCES_PATHS,
23
- debug: process.env.DEBUG || false,
24
- version: pkg.version,
25
- assetUrl: process.env.ASSET_URL || '/',
26
- });
11
+ watcher.clean(config);
12
+ watcher.run(null, config);
13
+
14
+ if (config.isDebug) {
15
+ console.table({
16
+ ...config,
17
+
18
+ version: pkg.version,
19
+
20
+ pluginMatch: config.pluginMatch.toString(),
21
+ vendorMatch: config.vendorMatch.toString(),
22
+ routeSplitMatch: config.routeSplitMatch.toString(),
23
+ allowedExtensions: config.allowedExtensions.toString(),
24
+ spriteOrder: config.spriteOrder.toString(),
25
+ ignoreIcons: config.ignoreIcons.toString(),
26
+ });
27
+ } else {
28
+ console.table({
29
+ isProd: config.isProd,
30
+ shopwareMode: config.shopwareMode,
31
+ assetUrl: config.assetUrl,
32
+ version: pkg.version,
33
+ });
34
+ }
27
35
  };
28
36
 
29
37
  setup();
30
38
 
31
- module.exports = {
32
- storefront: merge(dev, storefront, isProd ? production : {}),
33
- administration: merge(dev, administration, isProd ? production : {}),
34
- };
39
+ export const storefrontConfig = merge(dev, storefront, config.isProd ? production : {});
40
+ export const administrationConfig = merge(dev, administration, config.isProd ? production : {});
package/src/postcss.config.js CHANGED
@@ -1,4 +1,4 @@
1
- module.exports = {
1
+ export default {
2
2
  'plugins': {
3
3
  // to edit target browsers: use "browserslist" field in package.json
4
4
  'autoprefixer': {},
package/src/webpack.config.administration.js CHANGED
@@ -1,20 +1,17 @@
1
- const Path = require('path'),
2
- Fs = require('fs'),
3
- Entry = require('webpack-glob-entry'),
4
- privatePath = process.env.PLUGIN_PATH,
5
- vendorPath = process.env.VENDOR_PATH,
6
- publicPath = process.env.PUBLIC_PATH,
7
- spriteOrder = process.env.SPRITE_ORDER ?? ['pxsw/basic-theme', 'PxswBasicTheme', '**', 'pxsw/customer-theme', 'PxswCustomerTheme'],
8
- ignoreIcons = process.env.IGNORE_ICONS ?? [],
9
- isProd = process.env.NODE_ENV === 'production',
10
- ChangeCase = require('change-case'),
11
- MiniCssExtractPlugin = require('mini-css-extract-plugin'),
12
- Consola = require('consola'),
13
- AssetsCopyPlugin = require('@pixolith/webpack-assets-copy-plugin'),
14
- SvgStorePlugin = require('@pixolith/external-svg-sprite-loader'),
15
- outputPath = Path.resolve(process.cwd(), publicPath),
16
- outputConfig = {
17
- path: outputPath,
1
+ import config from './config.js';
2
+ import Path from 'path';
3
+ import Fs from 'fs';
4
+ import Entry from 'webpack-glob-entry';
5
+ import * as ChangeCase from 'change-case';
6
+ import MiniCssExtractPlugin from 'mini-css-extract-plugin';
7
+ import Consola from 'consola';
8
+ import AssetsCopyPlugin from '@pixolith/webpack-assets-copy-plugin';
9
+ import SvgStorePlugin from '@pixolith/external-svg-sprite-loader';
10
+
11
+ const __dirname = import.meta.dirname;
12
+
13
+ const outputConfig = {
14
+ path: config.outputPath,
18
15
  publicPath: '/',
19
16
  filename: (chunkData) => {
20
17
  let pluginName = chunkData.chunk.name
@@ -40,30 +37,32 @@ const Path = require('path'),
40
37
  }
41
38
  }
42
39
 
43
- module.exports = {
40
+ export default {
44
41
  entry: () => {
45
42
  let entriesPlugins = Entry(
46
43
  (filePath) =>
47
- ChangeCase.paramCase(
48
- filePath.match(/plugins\/(Pxsw[\w]*)\//)[1],
44
+ ChangeCase.kebabCase(
45
+ filePath.match(config.pluginMatch)[1],
49
46
  ),
50
- Path.resolve(privatePath, 'index.js'),
47
+ Path.join(config.pluginSrcPath, 'index.js'),
51
48
  );
52
49
 
53
50
  let entriesVendor = Entry(
54
51
  (filePath) =>
55
- ChangeCase.paramCase(
56
- filePath.match(/(vendor\/pxsw\/[\w-]*)\//)[1],
52
+ ChangeCase.kebabCase(
53
+ filePath.match(config.vendorMatch)[1],
57
54
  ),
58
- Path.resolve(vendorPath, 'index.js'),
55
+ Path.resolve(config.vendorSrcPath, 'index.js'),
59
56
  );
60
57
 
61
58
  if (process.env.DEBUG) {
62
59
  Consola.info('[DEBUG]: Webpack entry points:');
63
- Consola.info({...entriesPlugins, ...entriesVendor});
60
+ console.table({...entriesPlugins, ...entriesVendor });
64
61
  }
65
62
 
66
- return {...entriesPlugins, ...entriesVendor};
63
+ console.table({...entriesPlugins, ...entriesVendor });
64
+
65
+ return {...entriesPlugins, ...entriesVendor };
67
66
  },
68
67
  module: {
69
68
  // loader order is from right to left or from bottom to top depending on the notation but basicly always reverse
@@ -98,8 +97,8 @@ module.exports = {
98
97
  options: {
99
98
  name: 'sprite/sprite.svg',
100
99
  iconName: '[name]',
101
- overrideOrder: spriteOrder,
102
- ignoreIconsByName: ignoreIcons,
100
+ overrideOrder: config.spriteOrder,
101
+ ignoreIconsByName: config.ignoreIcons,
103
102
  onlySymbols: true,
104
103
  },
105
104
  },
@@ -136,13 +135,13 @@ module.exports = {
136
135
  new SvgStorePlugin(),
137
136
  new MiniCssExtractPlugin(miniCssChunksConfig),
138
137
  ].concat(
139
- isProd ?
138
+ config.isProd ?
140
139
  new AssetsCopyPlugin({
141
140
  includes: ['js', 'css'],
142
141
  ignoreFiles: [/[-\w.]*.hot-update.js/],
143
142
  files: [
144
143
  {
145
- from: publicPath,
144
+ from: config.outputPath,
146
145
  to: '$pluginPath/$plugin/src/Resources/public',
147
146
  replace: async (fromPath, toPath) => {
148
147
  let composerPluginName = Path.basename(fromPath).replace(
package/src/webpack.config.dev.js CHANGED
@@ -1,60 +1,51 @@
1
- const webpack = require('webpack'),
2
- Path = require('path'),
3
- Consola = require('consola'),
4
- Fs = require('fs'),
5
- ASSET_URL = process.env.ASSET_URL || '/',
6
- isProd = process.env.NODE_ENV === 'production',
7
- privatePath = process.env.PLUGIN_PATH,
8
- MiniCssExtractPlugin = require('mini-css-extract-plugin'),
9
- //MediaQueryPlugin = require('media-query-plugin'),
10
- FilenameLinterPlugin = require('@pixolith/webpack-filename-linter-plugin'),
11
- ESLintPlugin = require('eslint-webpack-plugin'),
12
- watcher = require('@pixolith/webpack-watcher'),
13
- Glob = require('glob'),
14
- HookPlugin = require('@pixolith/webpack-hook-plugin'),
15
- Sass = require('sass'),
16
- TimeFixPlugin = require('time-fix-plugin');
1
+ import config from './config.js';
2
+ import webpack from 'webpack';
3
+ import Path from 'path';
4
+ import Consola from 'consola';
5
+ import Fs from 'fs';
6
+ import MiniCssExtractPlugin from 'mini-css-extract-plugin';
7
+ import MediaQueryPlugin from 'media-query-plugin';
8
+ import ESLintPlugin from 'eslint-webpack-plugin';
9
+ import watcher from '@pixolith/webpack-watcher';
10
+ import * as Glob from 'glob';
11
+ import HookPlugin from '@pixolith/webpack-hook-plugin';
12
+ import * as Sass from 'sass';
13
+ import TimeFixPlugin from 'time-fix-plugin';
17
14
 
18
- module.exports = {
15
+ const __dirname = import.meta.dirname;
16
+
17
+ export default {
19
18
  target: 'web',
20
19
  mode: 'development',
21
20
  resolve: {
22
21
  modules: [
23
22
  'node_modules',
24
- Path.resolve(privatePath, 'js'),
25
- Path.resolve(
26
- './vendor/shopware/storefront/Resources/app/storefront/vendor',
27
- ),
23
+ Path.resolve(config.shopwareVendorPath),
28
24
  ],
29
25
  alias: {
30
- src: Path.join(
31
- process.cwd(),
32
- '/vendor/shopware/storefront/Resources/app/storefront/src',
33
- ),
26
+ src: Path.resolve(config.shopwarePluginPath),
27
+ vendor: Path.resolve(config.shopwareVendorPath),
34
28
  },
35
29
  },
36
30
  devtool: 'inline-cheap-module-source-map',
37
31
  module: {
38
- // loader order is from right to left or from bottom to top depending on the notation but basicly always reverse
39
32
  rules: [
40
33
  {
41
34
  test: /(\.scss|\.css)$/,
42
35
  use: [
43
- isProd ? MiniCssExtractPlugin.loader : 'style-loader',
36
+ config.isProd ? MiniCssExtractPlugin.loader : 'style-loader',
44
37
  {
45
38
  loader: 'css-loader',
46
39
  options: {
47
40
  importLoaders: 1,
48
- sourceMap: !isProd,
41
+ sourceMap: !config.isProd,
49
42
  },
50
43
  },
51
- //{
52
- // loader: MediaQueryPlugin.loader
53
- //},
44
+ config.isProd && config.mediaQueries ? MediaQueryPlugin.loader : '',
54
45
  {
55
46
  loader: 'postcss-loader',
56
47
  options: {
57
- sourceMap: !isProd,
48
+ sourceMap: !config.isProd,
58
49
  postcssOptions: {
59
50
  config: Path.resolve(__dirname, 'postcss.config.js'),
60
51
  },
@@ -63,8 +54,8 @@ module.exports = {
63
54
  {
64
55
  loader: 'sass-loader',
65
56
  options: {
66
- sourceMap: !isProd,
67
- additionalData: `$asset_url: '${ASSET_URL}';`,
57
+ sourceMap: !config.isProd,
58
+ additionalData: `$asset_url: '${config.assetUrl}';`,
68
59
  sassOptions: {
69
60
  quietDeps: true,
70
61
  logger: Sass.Logger.silent,
@@ -116,7 +107,7 @@ module.exports = {
116
107
  'X-Requested-With, content-type, Authorization',
117
108
  },
118
109
  port: process.env.SHOPWARE_MODE === 'administration' ? 8080 : 8081,
119
- server: !isProd
110
+ server: !config.isProd
120
111
  ? {
121
112
  type: 'https',
122
113
  options: {
@@ -152,7 +143,8 @@ module.exports = {
152
143
  Consola.success(
153
144
  `Starting webpack in [${process.env.NODE_ENV}] with [${process.env.SHOPWARE_MODE}]`,
154
145
  );
155
- watcher.watch();
146
+
147
+ watcher.watch(config);
156
148
 
157
149
  return middlewares;
158
150
  },
@@ -166,7 +158,7 @@ module.exports = {
166
158
  }),
167
159
  new HookPlugin({
168
160
  beforeCompile(compiler, callback) {
169
- let path = Path.join(process.cwd(), 'public/sprite'),
161
+ let path = Path.join(config.outputPath, 'sprite'),
170
162
  filename = 'sprite.svg',
171
163
  exists = Fs.existsSync(path);
172
164
 
@@ -184,19 +176,7 @@ module.exports = {
184
176
  callback();
185
177
  },
186
178
  failed() {
187
- watcher.run();
188
- },
189
- }),
190
-
191
- new FilenameLinterPlugin({
192
- ignoreFiles: [/node_modules/, /custom\/apps/, /vendor/],
193
- rules: {
194
- // check cases here https://github.com/blakeembrey/change-case
195
- scss: 'paramCase',
196
- js: 'paramCase',
197
- woff: 'paramCase',
198
- woff2: 'paramCase',
199
- svg: 'paramCase',
179
+ watcher.run(null, config);
200
180
  },
201
181
  }),
202
182
 
@@ -206,19 +186,16 @@ module.exports = {
206
186
  'process.env.NODE_ENV': JSON.stringify(
207
187
  process.env.NODE_ENV || 'development',
208
188
  ),
209
- 'process.env.ASSET_URL': JSON.stringify(ASSET_URL),
189
+ 'process.env.ASSET_URL': JSON.stringify(config.assetUrl),
190
+ 'process.env.RESOURCES_PATHS': JSON.stringify(process.env.RESOURCES_PATHS || '[]'),
210
191
  }),
211
-
212
- //new MediaQueryPlugin({
213
- // include: [
214
- // 'example'
215
- // ],
216
- // queries: {
217
- // '@media(min-width:768px)': 'desktop',
218
- // '@media(min-width:1024px)': 'desktop',
219
- // '@media(min-width:1280px)': 'desktop',
220
- // }
221
- //}),
222
- ],
192
+ ].concat(
193
+ config.isProd && config.mediaQueries
194
+ ? new MediaQueryPlugin({
195
+ include: true,
196
+ queries: JSON.parse(config.mediaQueries)
197
+ })
198
+ : []
199
+ ),
223
200
  watch: false,
224
201
  };
package/src/webpack.config.production.js CHANGED
@@ -1,65 +1,57 @@
1
- const webpack = require('webpack'),
2
- TerserPlugin = require('terser-webpack-plugin'),
3
- CssMinimizerPlugin = require('css-minimizer-webpack-plugin'),
4
- StyleLintPlugin = require('stylelint-webpack-plugin'),
5
- Glob = require('glob'),
6
- Path = require('path'),
7
- privatePath = process.env.PLUGIN_PATH,
8
- config = {
9
- devtool: 'nosources-source-map',
10
- performance: {
11
- maxEntrypointSize: 300000,
12
- maxAssetSize: 250000,
13
- hints: 'warning',
14
- },
15
- mode: 'production',
16
- optimization: {
17
- splitChunks: false,
18
- runtimeChunk: false,
19
- minimizer: [
20
- new CssMinimizerPlugin({
21
- minimizerOptions: {
22
- preset: [
23
- "default",
24
- {
25
- zIndex: false,
26
- discardComments: { removeAll: true }
27
- },
28
- ],
29
- },
30
- minify: [
31
- CssMinimizerPlugin.cssnanoMinify,
32
- ]
33
- }),
34
- new TerserPlugin({
35
- minify: TerserPlugin.swcMinify,
36
- terserOptions: {
37
- compress: {
38
- drop_console: true,
1
+ import webpack from 'webpack';
2
+ import TerserPlugin from 'terser-webpack-plugin';
3
+ import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
4
+ import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts';
5
+
6
+ const productionConfig = {
7
+ devtool: 'nosources-source-map',
8
+ performance: {
9
+ maxEntrypointSize: 300000,
10
+ maxAssetSize: 250000,
11
+ hints: 'warning',
12
+ },
13
+ mode: 'production',
14
+ optimization: {
15
+ splitChunks: false,
16
+ runtimeChunk: false,
17
+ minimizer: [
18
+ new CssMinimizerPlugin({
19
+ minimizerOptions: {
20
+ preset: [
21
+ "default",
22
+ {
23
+ zIndex: false,
24
+ discardComments: { removeAll: true }
39
25
  },
26
+ ],
27
+ },
28
+ minify: [
29
+ CssMinimizerPlugin.cssnanoMinify,
30
+ ]
31
+ }),
32
+ new TerserPlugin({
33
+ minify: TerserPlugin.swcMinify,
34
+ terserOptions: {
35
+ compress: {
36
+ drop_console: true,
40
37
  },
41
- parallel: true,
42
- extractComments: false,
43
- }),
44
- ],
45
- },
46
- plugins: [
47
- new webpack.DefinePlugin({
48
- 'process.env': {
49
- NODE_ENV: '"production"',
50
38
  },
39
+ parallel: true,
40
+ extractComments: false,
51
41
  }),
52
- ].concat(
53
- Glob.sync(Path.join(privatePath, '/**/*.s?(a|c)ss')).length
54
- ? new StyleLintPlugin({
55
- files: '**/Pxsw*/**/*.s?(a|c)ss',
56
- failOnError: false,
57
- fix: false,
58
- configFile: Path.join(__dirname, 'stylelint.config.js'),
59
- })
60
- : [],
61
- ),
62
- stats: 'normal',
63
- };
42
+ ],
43
+ },
44
+ plugins: [
45
+ new webpack.DefinePlugin({
46
+ 'process.env': {
47
+ NODE_ENV: '"production"',
48
+ },
49
+ }),
50
+ new RemoveEmptyScriptsPlugin(),
51
+ ].concat(
52
+ []
53
+ ),
54
+ stats: 'normal',
55
+ };
64
56
 
65
- module.exports = config;
57
+ export default productionConfig;
package/src/webpack.config.storefront.js CHANGED
@@ -1,89 +1,75 @@
1
- const Path = require('path'),
2
- Fs = require('fs'),
3
- MiniCssExtractPlugin = require('mini-css-extract-plugin'),
4
- privatePath = process.env.PLUGIN_PATH,
5
- vendorPath = process.env.VENDOR_PATH,
6
- spriteOrder = process.env.SPRITE_ORDER ?? ['pxsw/basic-theme', 'PxswBasicTheme', '**', 'pxsw/customer-theme', 'PxswCustomerTheme'],
7
- ignoreIcons = process.env.IGNORE_ICONS ?? [],
8
- swNodePath = process.env.SW_NODE_PATH ?? './vendor/shopware/storefront/Resources/app/storefront/vendor',
9
- swAliasPath = process.env.SW_ALIAS_PATH ?? '/vendor/shopware/storefront/Resources/app/storefront/src',
10
- isProd = process.env.NODE_ENV === 'production',
11
- ChangeCase = require('change-case'),
12
- Consola = require('consola'),
13
- Sw6PluginMapEmitterPlugin = require('@pixolith/webpack-sw6-plugin-map-emitter'),
14
- Entry = require('webpack-glob-entry'),
15
- SvgStorePlugin = require('@pixolith/external-svg-sprite-loader'),
16
- publicPath = process.env.PUBLIC_PATH,
17
- ASSET_URL = process.env.ASSET_URL || '/',
18
- outputConfig = {
19
- path: Path.join(process.cwd(), publicPath),
20
- publicPath: ASSET_URL,
21
- chunkFilename: (chunkData) => {
22
- return `js/chunk[name]${
23
- isProd ? '.[contenthash:6]' : ''
24
- }.js`;
25
- },
26
- filename: (chunkData) => {
27
- return `js/${chunkData.chunk.name.toLowerCase()}${
28
- isProd ? `.[contenthash:6]` : ''
29
- }.js`;
30
- },
1
+ import config from './config.js';
2
+ import Path from 'path';
3
+ import MiniCssExtractPlugin from 'mini-css-extract-plugin';
4
+ import * as ChangeCase from 'change-case';
5
+ import Consola from 'consola';
6
+ import Sw6PluginMapEmitterPlugin from '@pixolith/webpack-sw6-plugin-map-emitter';
7
+ import Entry from 'webpack-glob-entry';
8
+ import SvgStorePlugin from '@pixolith/external-svg-sprite-loader';
9
+ import browserList from 'browserslist';
10
+
11
+ const outputConfig = {
12
+ path: config.outputPath,
13
+ publicPath: config.assetUrl,
14
+ chunkFilename: (chunkData) => {
15
+ return `js/chunk[name]${config.isProd ? '.[contenthash]' : ''}.js`;
16
+ },
17
+ filename: (chunkData) => {
18
+ return `js/${chunkData.chunk.name.toLowerCase()}${config.isProd ? `.[contenthash]` : ''}.js`;
31
19
  },
32
- miniCssChunksConfig = {
33
- filename: `css/[name]${
34
- isProd ? '.[contenthash:6]' : ''
35
- }.css`,
36
- chunkFilename: `css/[name].vendor${
37
- isProd ? '.[contenthash:6]' : ''
38
- }.css`
39
- };
20
+ };
21
+
22
+ const miniCssChunksConfig = {
23
+ filename: `css/[name]${config.isProd ? '.[contenthash]' : ''}.css`,
24
+ chunkFilename: `css/[name].vendor${config.isProd ? '.[contenthash]' : ''}.css`
25
+ };
40
26
 
41
- module.exports = {
27
+ export default {
42
28
  entry: () => {
43
29
  let entriesPlugins = Entry(
44
- (filePath) =>
45
- ChangeCase.paramCase(
46
- filePath.match(/plugins\/(Pxsw[\w]*)\//)[1],
47
- ),
48
- Path.resolve(privatePath, 'index.js'),
30
+ (filePath) => ChangeCase.kebabCase(filePath.match(config.pluginMatch)[1]),
31
+ Path.resolve(config.pluginSrcPath, 'index.js')
49
32
  );
50
33
 
51
34
  let entriesVendor = Entry(
52
- (filePath) =>
53
- ChangeCase.paramCase(
54
- filePath.match(/(vendor\/pxsw\/[\w-]*)\//)[1],
55
- ),
56
- Path.resolve(vendorPath, 'index.js'),
35
+ (filePath) => ChangeCase.kebabCase(filePath.match(config.vendorMatch)[1]),
36
+ Path.resolve(config.vendorSrcPath, 'index.js')
37
+ );
38
+
39
+ let routeSplitEntriesPlugins = Entry(
40
+ (filePath) => filePath.split('/').pop().replace('.index.scss', '').replace('.', '_'),
41
+ Path.resolve(config.pluginRouteSplitPath, '*index.scss')
57
42
  );
58
43
 
59
- if (process.env.DEBUG) {
44
+ let routeSplitEntriesVendor = Entry(
45
+ (filePath) => ChangeCase.paramCase(filePath.match(config.vendorMatch)[1]),
46
+ Path.resolve(config.vendorRouteSplitPath, 'route-splitting/*/*index.scss')
47
+ );
48
+
49
+ //let coreEntries = Entry(
50
+ // (filePath) => 'storefront',
51
+ // Path.resolve('vendor/shopware/storefront/Resources/app/storefront/src/scss', 'base.scss')
52
+ //);
53
+
54
+ //let match = new RegExp(`vendor\/store.shopware.com\/([\\w-]*)\/`);
55
+ //let pluginEntries = Entry(
56
+ // (filePath) => filePath.match(match)[1].toLowerCase(),
57
+ // Path.resolve('vendor/store.shopware.com/*/src/Resources/app/storefront/src/scss', 'base.scss')
58
+ //);
59
+
60
+ if (config.isDebug) {
60
61
  Consola.info('[DEBUG]: Webpack entry points:');
61
- Consola.info({ ...entriesPlugins, ...entriesVendor });
62
+ console.table({...entriesPlugins, ...entriesVendor, ...routeSplitEntriesPlugins, ...routeSplitEntriesVendor});
62
63
  }
63
64
 
64
- return { ...entriesPlugins, ...entriesVendor };
65
- },
66
- resolve: {
67
- modules: [
68
- 'node_modules',
69
- Path.resolve(privatePath, 'js'),
70
- Path.resolve(swNodePath),
71
- ],
72
- alias: {
73
- src: Path.join(
74
- process.cwd(),
75
- swAliasPath,
76
- ),
77
- },
65
+ //return {...entriesPlugins, ...entriesVendor, ...routeSplitEntriesPlugins, ...routeSplitEntriesVendor, ...coreEntries, ...pluginEntries};
66
+ return {...entriesPlugins, ...entriesVendor, ...routeSplitEntriesPlugins, ...routeSplitEntriesVendor};
78
67
  },
79
68
  module: {
80
- // loader order is from right to left or from bottom to top depending on the notation but basicly always reverse
81
69
  rules: [
82
70
  {
83
71
  test: /\.js$/,
84
- exclude: (file) => {
85
- return /node_modules/.test(file);
86
- },
72
+ exclude: (file) => /node_modules/.test(file),
87
73
  use: [
88
74
  {
89
75
  loader: 'swc-loader',
@@ -92,7 +78,7 @@ module.exports = {
92
78
  mode: 'entry',
93
79
  coreJs: '3.34.0',
94
80
  // .browserlist settings are not found by swc-loader, so we load it manually: https://github.com/swc-project/swc/issues/3365
95
- targets: require('browserslist').loadConfig({
81
+ targets: browserList.loadConfig({
96
82
  config: './package.json',
97
83
  }),
98
84
  },
@@ -132,8 +118,8 @@ module.exports = {
132
118
  options: {
133
119
  name: 'sprite/sprite.svg',
134
120
  iconName: '[name]',
135
- overrideOrder: spriteOrder,
136
- ignoreIconsByName: ignoreIcons,
121
+ overrideOrder: config.spriteOrder,
122
+ ignoreIconsByName: config.ignoreIcons,
137
123
  onlySymbols: true,
138
124
  },
139
125
  },
@@ -171,9 +157,7 @@ module.exports = {
171
157
  includes: ['js', 'css'],
172
158
  ignoreFiles: [/.*icons.*\.js/, /.*chunk.*\.js/],
173
159
  }),
174
-
175
160
  new SvgStorePlugin(),
176
-
177
161
  new MiniCssExtractPlugin(miniCssChunksConfig),
178
162
  ],
179
163
  };