@pixolith/webpack-sw6-config 8.2.0 → 9.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.
- package/package.json +55 -54
- package/src/config.js +75 -0
- package/src/index.js +27 -19
- package/src/webpack.config.administration.js +17 -20
- package/src/webpack.config.dev.js +25 -50
- package/src/webpack.config.production.js +15 -12
- package/src/webpack.config.storefront.js +30 -39
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pixolith/webpack-sw6-config",
|
|
3
3
|
"public": true,
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "9.0.0",
|
|
5
5
|
"description": "",
|
|
6
6
|
"main": "src/index.js",
|
|
7
7
|
"scripts": {},
|
|
@@ -21,77 +21,78 @@
|
|
|
21
21
|
"url": "https://github.com/pixolith/webpack-plugins/issues"
|
|
22
22
|
},
|
|
23
23
|
"homepage": "https://github.com/pixolith/webpack-plugins/tree/master/packages/webpack-hook-plugin/#readme",
|
|
24
|
-
"gitHead": "
|
|
24
|
+
"gitHead": "07feda64fe1e987ef572a4ad06619712eccd4b6e",
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@babel/cli": "7.
|
|
27
|
-
"@babel/core": "^7.
|
|
28
|
-
"@babel/eslint-parser": "^7.
|
|
29
|
-
"@babel/plugin-proposal-decorators": "7.
|
|
30
|
-
"@babel/preset-env": "7.
|
|
31
|
-
"@babel/preset-typescript": "7.
|
|
32
|
-
"@pixolith/eslint-config-sw6": "^
|
|
33
|
-
"@pixolith/external-svg-sprite-loader": "^
|
|
34
|
-
"@pixolith/stylelint-config-standard": "^
|
|
35
|
-
"@pixolith/webpack-assets-copy-plugin": "^
|
|
36
|
-
"@pixolith/webpack-filename-linter-plugin": "^
|
|
37
|
-
"@pixolith/webpack-hook-plugin": "^
|
|
38
|
-
"@pixolith/webpack-sw6-plugin-map-emitter": "^
|
|
39
|
-
"@pixolith/webpack-watcher": "^
|
|
40
|
-
"@swc/core": "^1.
|
|
41
|
-
"autoprefixer": "^10.4.
|
|
42
|
-
"babel-loader": "^9.1
|
|
43
|
-
"change-case": "^4.
|
|
44
|
-
"chokidar": "^
|
|
45
|
-
"concurrently": "^
|
|
46
|
-
"consola": "^3.
|
|
47
|
-
"core-js": "^3.
|
|
26
|
+
"@babel/cli": "7.25.9",
|
|
27
|
+
"@babel/core": "^7.26.0",
|
|
28
|
+
"@babel/eslint-parser": "^7.25.9",
|
|
29
|
+
"@babel/plugin-proposal-decorators": "7.25.9",
|
|
30
|
+
"@babel/preset-env": "7.26.0",
|
|
31
|
+
"@babel/preset-typescript": "7.26.0",
|
|
32
|
+
"@pixolith/eslint-config-sw6": "^9.0.0",
|
|
33
|
+
"@pixolith/external-svg-sprite-loader": "^9.0.0",
|
|
34
|
+
"@pixolith/stylelint-config-standard": "^9.0.0",
|
|
35
|
+
"@pixolith/webpack-assets-copy-plugin": "^9.0.0",
|
|
36
|
+
"@pixolith/webpack-filename-linter-plugin": "^9.0.0",
|
|
37
|
+
"@pixolith/webpack-hook-plugin": "^9.0.0",
|
|
38
|
+
"@pixolith/webpack-sw6-plugin-map-emitter": "^9.0.0",
|
|
39
|
+
"@pixolith/webpack-watcher": "^9.0.0",
|
|
40
|
+
"@swc/core": "^1.9.3",
|
|
41
|
+
"autoprefixer": "^10.4.20",
|
|
42
|
+
"babel-loader": "^9.2.1",
|
|
43
|
+
"change-case": "^5.4.4",
|
|
44
|
+
"chokidar": "^4.0.1",
|
|
45
|
+
"concurrently": "^9.1.0",
|
|
46
|
+
"consola": "^3.2.3",
|
|
47
|
+
"core-js": "^3.39.0",
|
|
48
48
|
"cross-env": "^7.0.3",
|
|
49
|
-
"css-loader": "^
|
|
50
|
-
"css-minimizer-webpack-plugin": "^
|
|
51
|
-
"cssnano-preset-advanced": "^
|
|
49
|
+
"css-loader": "^7.1.2",
|
|
50
|
+
"css-minimizer-webpack-plugin": "^7.0.0",
|
|
51
|
+
"cssnano-preset-advanced": "^7.0.6",
|
|
52
52
|
"deepmerge": "^4.3.1",
|
|
53
|
-
"eslint": "^
|
|
53
|
+
"eslint": "^9.15.0",
|
|
54
54
|
"eslint-friendly-formatter": "^4.0.1",
|
|
55
55
|
"eslint-plugin-filenames": "^1.3.2",
|
|
56
56
|
"eslint-plugin-spellcheck": "0.0.20",
|
|
57
|
-
"eslint-webpack-plugin": "^4.0
|
|
58
|
-
"execa": "^
|
|
57
|
+
"eslint-webpack-plugin": "^4.2.0",
|
|
58
|
+
"execa": "^9.5.1",
|
|
59
59
|
"external-svg-sprite-loader": "^7.2.0",
|
|
60
60
|
"file-loader": "^6.2.0",
|
|
61
|
-
"glob": "^
|
|
62
|
-
"html-loader": "^
|
|
61
|
+
"glob": "^11.0.0",
|
|
62
|
+
"html-loader": "^5.1.0",
|
|
63
63
|
"media-query-plugin": "^1.5.0",
|
|
64
|
-
"mini-css-extract-plugin": "^2.
|
|
65
|
-
"postcss": "^8.4.
|
|
66
|
-
"postcss-loader": "^
|
|
67
|
-
"postcss-pxtorem": "^6.
|
|
68
|
-
"postcss-scss": "^4.0.
|
|
69
|
-
"prettier": "^
|
|
64
|
+
"mini-css-extract-plugin": "^2.9.2",
|
|
65
|
+
"postcss": "^8.4.49",
|
|
66
|
+
"postcss-loader": "^8.1.1",
|
|
67
|
+
"postcss-pxtorem": "^6.1.0",
|
|
68
|
+
"postcss-scss": "^4.0.9",
|
|
69
|
+
"prettier": "^3.4.1",
|
|
70
70
|
"resolve-url-loader": "^5.0.0",
|
|
71
|
-
"rimraf": "^
|
|
72
|
-
"sass": "^1.
|
|
73
|
-
"sass-loader": "^
|
|
71
|
+
"rimraf": "^6.0.1",
|
|
72
|
+
"sass": "^1.81.0",
|
|
73
|
+
"sass-loader": "^16.0.3",
|
|
74
74
|
"sass-resources-loader": "^2.2.5",
|
|
75
75
|
"string-replace-loader": "^3.1.0",
|
|
76
|
-
"style-loader": "^
|
|
77
|
-
"stylelint": "^
|
|
78
|
-
"stylelint-config-standard": "^
|
|
79
|
-
"stylelint-config-standard-scss": "^
|
|
80
|
-
"stylelint-prettier": "^
|
|
81
|
-
"stylelint-webpack-plugin": "^
|
|
76
|
+
"style-loader": "^4.0.0",
|
|
77
|
+
"stylelint": "^16.10.0",
|
|
78
|
+
"stylelint-config-standard": "^36.0.1",
|
|
79
|
+
"stylelint-config-standard-scss": "^13.1.0",
|
|
80
|
+
"stylelint-prettier": "^5.0.2",
|
|
81
|
+
"stylelint-webpack-plugin": "^5.0.1",
|
|
82
82
|
"svg-sprite-loader": "^6.0.11",
|
|
83
83
|
"svg-transform-loader": "^2.0.13",
|
|
84
84
|
"svgo-loader": "^4.0.0",
|
|
85
|
-
"swc-loader": "^0.2.
|
|
86
|
-
"terser-webpack-plugin": "^5.3.
|
|
85
|
+
"swc-loader": "^0.2.6",
|
|
86
|
+
"terser-webpack-plugin": "^5.3.10",
|
|
87
87
|
"time-fix-plugin": "^2.0.7",
|
|
88
88
|
"url-loader": "^4.1.1",
|
|
89
|
-
"webpack": "^5.
|
|
90
|
-
"webpack-cli": "^5.1.
|
|
91
|
-
"webpack-dev-server": "^
|
|
89
|
+
"webpack": "^5.96.1",
|
|
90
|
+
"webpack-cli": "^5.1.4",
|
|
91
|
+
"webpack-dev-server": "^5.1.0",
|
|
92
92
|
"webpack-glob-entry": "^2.1.1",
|
|
93
|
-
"webpack-merge": "^
|
|
94
|
-
"
|
|
93
|
+
"webpack-merge": "^6.0.1",
|
|
94
|
+
"webpack-remove-empty-scripts": "^1.0.4",
|
|
95
|
+
"webpackbar": "^7.0.0",
|
|
95
96
|
"write-file-webpack-plugin": "^4.5.1"
|
|
96
97
|
}
|
|
97
98
|
}
|
package/src/config.js
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const Path = require('path');
|
|
4
|
+
|
|
5
|
+
const config = {
|
|
6
|
+
isProd: process.env.NODE_ENV === 'production',
|
|
7
|
+
isDebug: !!process.env.DEBUG || true,
|
|
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
|
+
module.exports = {
|
|
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,42 @@
|
|
|
1
|
+
const config = require('./config');
|
|
1
2
|
const production = require('./webpack.config.production');
|
|
2
3
|
const storefront = require('./webpack.config.storefront');
|
|
3
4
|
const dev = require('./webpack.config.dev');
|
|
4
5
|
const administration = require('./webpack.config.administration');
|
|
5
|
-
const isProd = process.env.NODE_ENV === 'production';
|
|
6
6
|
const pkg = require('./../package.json');
|
|
7
7
|
const watcher = require('@pixolith/webpack-watcher');
|
|
8
8
|
const { merge } = require('webpack-merge');
|
|
9
|
-
const Consola = require('consola');
|
|
10
9
|
|
|
11
10
|
const setup = () => {
|
|
12
|
-
|
|
13
|
-
watcher.
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
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
39
|
module.exports = {
|
|
32
|
-
storefront: merge(dev, storefront, isProd ? production : {}),
|
|
33
|
-
administration: merge(dev, administration, isProd ? production : {}),
|
|
40
|
+
storefront: merge(dev, storefront, config.isProd ? production : {}),
|
|
41
|
+
administration: merge(dev, administration, config.isProd ? production : {}),
|
|
34
42
|
};
|
|
@@ -1,20 +1,15 @@
|
|
|
1
|
+
const config = require('./config');
|
|
2
|
+
|
|
1
3
|
const Path = require('path'),
|
|
2
4
|
Fs = require('fs'),
|
|
3
5
|
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
6
|
ChangeCase = require('change-case'),
|
|
11
7
|
MiniCssExtractPlugin = require('mini-css-extract-plugin'),
|
|
12
8
|
Consola = require('consola'),
|
|
13
9
|
AssetsCopyPlugin = require('@pixolith/webpack-assets-copy-plugin'),
|
|
14
10
|
SvgStorePlugin = require('@pixolith/external-svg-sprite-loader'),
|
|
15
|
-
outputPath = Path.resolve(process.cwd(), publicPath),
|
|
16
11
|
outputConfig = {
|
|
17
|
-
path: outputPath,
|
|
12
|
+
path: config.outputPath,
|
|
18
13
|
publicPath: '/',
|
|
19
14
|
filename: (chunkData) => {
|
|
20
15
|
let pluginName = chunkData.chunk.name
|
|
@@ -44,26 +39,28 @@ module.exports = {
|
|
|
44
39
|
entry: () => {
|
|
45
40
|
let entriesPlugins = Entry(
|
|
46
41
|
(filePath) =>
|
|
47
|
-
ChangeCase.
|
|
48
|
-
filePath.match(
|
|
42
|
+
ChangeCase.kebabCase(
|
|
43
|
+
filePath.match(config.pluginMatch)[1],
|
|
49
44
|
),
|
|
50
|
-
Path.
|
|
45
|
+
Path.join(config.pluginSrcPath, 'index.js'),
|
|
51
46
|
);
|
|
52
47
|
|
|
53
48
|
let entriesVendor = Entry(
|
|
54
49
|
(filePath) =>
|
|
55
|
-
ChangeCase.
|
|
56
|
-
filePath.match(
|
|
50
|
+
ChangeCase.kebabCase(
|
|
51
|
+
filePath.match(config.vendorMatch)[1],
|
|
57
52
|
),
|
|
58
|
-
Path.resolve(
|
|
53
|
+
Path.resolve(config.vendorSrcPath, 'index.js'),
|
|
59
54
|
);
|
|
60
55
|
|
|
61
56
|
if (process.env.DEBUG) {
|
|
62
57
|
Consola.info('[DEBUG]: Webpack entry points:');
|
|
63
|
-
|
|
58
|
+
console.table({...entriesPlugins, ...entriesVendor });
|
|
64
59
|
}
|
|
65
60
|
|
|
66
|
-
|
|
61
|
+
console.table({...entriesPlugins, ...entriesVendor });
|
|
62
|
+
|
|
63
|
+
return {...entriesPlugins, ...entriesVendor };
|
|
67
64
|
},
|
|
68
65
|
module: {
|
|
69
66
|
// loader order is from right to left or from bottom to top depending on the notation but basicly always reverse
|
|
@@ -98,8 +95,8 @@ module.exports = {
|
|
|
98
95
|
options: {
|
|
99
96
|
name: 'sprite/sprite.svg',
|
|
100
97
|
iconName: '[name]',
|
|
101
|
-
overrideOrder: spriteOrder,
|
|
102
|
-
ignoreIconsByName: ignoreIcons,
|
|
98
|
+
overrideOrder: config.spriteOrder,
|
|
99
|
+
ignoreIconsByName: config.ignoreIcons,
|
|
103
100
|
onlySymbols: true,
|
|
104
101
|
},
|
|
105
102
|
},
|
|
@@ -136,13 +133,13 @@ module.exports = {
|
|
|
136
133
|
new SvgStorePlugin(),
|
|
137
134
|
new MiniCssExtractPlugin(miniCssChunksConfig),
|
|
138
135
|
].concat(
|
|
139
|
-
isProd ?
|
|
136
|
+
config.isProd ?
|
|
140
137
|
new AssetsCopyPlugin({
|
|
141
138
|
includes: ['js', 'css'],
|
|
142
139
|
ignoreFiles: [/[-\w.]*.hot-update.js/],
|
|
143
140
|
files: [
|
|
144
141
|
{
|
|
145
|
-
from:
|
|
142
|
+
from: config.outputPath,
|
|
146
143
|
to: '$pluginPath/$plugin/src/Resources/public',
|
|
147
144
|
replace: async (fromPath, toPath) => {
|
|
148
145
|
let composerPluginName = Path.basename(fromPath).replace(
|
|
@@ -1,13 +1,11 @@
|
|
|
1
|
+
const config = require('./config');
|
|
2
|
+
|
|
1
3
|
const webpack = require('webpack'),
|
|
2
4
|
Path = require('path'),
|
|
3
5
|
Consola = require('consola'),
|
|
4
6
|
Fs = require('fs'),
|
|
5
|
-
ASSET_URL = process.env.ASSET_URL || '/',
|
|
6
|
-
isProd = process.env.NODE_ENV === 'production',
|
|
7
|
-
privatePath = process.env.PLUGIN_PATH,
|
|
8
7
|
MiniCssExtractPlugin = require('mini-css-extract-plugin'),
|
|
9
|
-
|
|
10
|
-
FilenameLinterPlugin = require('@pixolith/webpack-filename-linter-plugin'),
|
|
8
|
+
MediaQueryPlugin = require('media-query-plugin'),
|
|
11
9
|
ESLintPlugin = require('eslint-webpack-plugin'),
|
|
12
10
|
watcher = require('@pixolith/webpack-watcher'),
|
|
13
11
|
Glob = require('glob'),
|
|
@@ -21,16 +19,10 @@ module.exports = {
|
|
|
21
19
|
resolve: {
|
|
22
20
|
modules: [
|
|
23
21
|
'node_modules',
|
|
24
|
-
Path.resolve(
|
|
25
|
-
Path.resolve(
|
|
26
|
-
'./vendor/shopware/storefront/Resources/app/storefront/vendor',
|
|
27
|
-
),
|
|
22
|
+
Path.resolve(config.shopwareVendorPath),
|
|
28
23
|
],
|
|
29
24
|
alias: {
|
|
30
|
-
src: Path.
|
|
31
|
-
process.cwd(),
|
|
32
|
-
'/vendor/shopware/storefront/Resources/app/storefront/src',
|
|
33
|
-
),
|
|
25
|
+
src: Path.resolve(config.shopwarePluginPath),
|
|
34
26
|
},
|
|
35
27
|
},
|
|
36
28
|
devtool: 'inline-cheap-module-source-map',
|
|
@@ -40,21 +32,19 @@ module.exports = {
|
|
|
40
32
|
{
|
|
41
33
|
test: /(\.scss|\.css)$/,
|
|
42
34
|
use: [
|
|
43
|
-
isProd ? MiniCssExtractPlugin.loader : 'style-loader',
|
|
35
|
+
config.isProd ? MiniCssExtractPlugin.loader : 'style-loader',
|
|
44
36
|
{
|
|
45
37
|
loader: 'css-loader',
|
|
46
38
|
options: {
|
|
47
39
|
importLoaders: 1,
|
|
48
|
-
sourceMap: !isProd,
|
|
40
|
+
sourceMap: !config.isProd,
|
|
49
41
|
},
|
|
50
42
|
},
|
|
51
|
-
|
|
52
|
-
// loader: MediaQueryPlugin.loader
|
|
53
|
-
//},
|
|
43
|
+
config.isProd && config.mediaQueries ? MediaQueryPlugin.loader : '',
|
|
54
44
|
{
|
|
55
45
|
loader: 'postcss-loader',
|
|
56
46
|
options: {
|
|
57
|
-
sourceMap: !isProd,
|
|
47
|
+
sourceMap: !config.isProd,
|
|
58
48
|
postcssOptions: {
|
|
59
49
|
config: Path.resolve(__dirname, 'postcss.config.js'),
|
|
60
50
|
},
|
|
@@ -63,8 +53,8 @@ module.exports = {
|
|
|
63
53
|
{
|
|
64
54
|
loader: 'sass-loader',
|
|
65
55
|
options: {
|
|
66
|
-
sourceMap: !isProd,
|
|
67
|
-
additionalData: `$asset_url: '${
|
|
56
|
+
sourceMap: !config.isProd,
|
|
57
|
+
additionalData: `$asset_url: '${config.assetUrl}';`,
|
|
68
58
|
sassOptions: {
|
|
69
59
|
quietDeps: true,
|
|
70
60
|
logger: Sass.Logger.silent,
|
|
@@ -116,7 +106,7 @@ module.exports = {
|
|
|
116
106
|
'X-Requested-With, content-type, Authorization',
|
|
117
107
|
},
|
|
118
108
|
port: process.env.SHOPWARE_MODE === 'administration' ? 8080 : 8081,
|
|
119
|
-
server: !isProd
|
|
109
|
+
server: !config.isProd
|
|
120
110
|
? {
|
|
121
111
|
type: 'https',
|
|
122
112
|
options: {
|
|
@@ -152,7 +142,8 @@ module.exports = {
|
|
|
152
142
|
Consola.success(
|
|
153
143
|
`Starting webpack in [${process.env.NODE_ENV}] with [${process.env.SHOPWARE_MODE}]`,
|
|
154
144
|
);
|
|
155
|
-
|
|
145
|
+
|
|
146
|
+
watcher.watch(config);
|
|
156
147
|
|
|
157
148
|
return middlewares;
|
|
158
149
|
},
|
|
@@ -166,7 +157,7 @@ module.exports = {
|
|
|
166
157
|
}),
|
|
167
158
|
new HookPlugin({
|
|
168
159
|
beforeCompile(compiler, callback) {
|
|
169
|
-
let path = Path.join(
|
|
160
|
+
let path = Path.join(config.outputPath, 'sprite'),
|
|
170
161
|
filename = 'sprite.svg',
|
|
171
162
|
exists = Fs.existsSync(path);
|
|
172
163
|
|
|
@@ -184,19 +175,7 @@ module.exports = {
|
|
|
184
175
|
callback();
|
|
185
176
|
},
|
|
186
177
|
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',
|
|
178
|
+
watcher.run(null, config);
|
|
200
179
|
},
|
|
201
180
|
}),
|
|
202
181
|
|
|
@@ -206,19 +185,15 @@ module.exports = {
|
|
|
206
185
|
'process.env.NODE_ENV': JSON.stringify(
|
|
207
186
|
process.env.NODE_ENV || 'development',
|
|
208
187
|
),
|
|
209
|
-
'process.env.ASSET_URL': JSON.stringify(
|
|
188
|
+
'process.env.ASSET_URL': JSON.stringify(config.assetUrl),
|
|
210
189
|
}),
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
// '@media(min-width:1280px)': 'desktop',
|
|
220
|
-
// }
|
|
221
|
-
//}),
|
|
222
|
-
],
|
|
190
|
+
].concat(
|
|
191
|
+
config.isProd && config.mediaQueries
|
|
192
|
+
? new MediaQueryPlugin({
|
|
193
|
+
include: true,
|
|
194
|
+
queries: JSON.parse(config.mediaQueries)
|
|
195
|
+
})
|
|
196
|
+
: []
|
|
197
|
+
),
|
|
223
198
|
watch: false,
|
|
224
199
|
};
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
const
|
|
1
|
+
const config = require('./config'),
|
|
2
|
+
webpack = require('webpack'),
|
|
2
3
|
TerserPlugin = require('terser-webpack-plugin'),
|
|
3
4
|
CssMinimizerPlugin = require('css-minimizer-webpack-plugin'),
|
|
4
5
|
StyleLintPlugin = require('stylelint-webpack-plugin'),
|
|
5
6
|
Glob = require('glob'),
|
|
7
|
+
RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts'),
|
|
6
8
|
Path = require('path'),
|
|
7
|
-
|
|
8
|
-
config = {
|
|
9
|
+
productionConfig = {
|
|
9
10
|
devtool: 'nosources-source-map',
|
|
10
11
|
performance: {
|
|
11
12
|
maxEntrypointSize: 300000,
|
|
@@ -49,17 +50,19 @@ const webpack = require('webpack'),
|
|
|
49
50
|
NODE_ENV: '"production"',
|
|
50
51
|
},
|
|
51
52
|
}),
|
|
53
|
+
new RemoveEmptyScriptsPlugin(),
|
|
52
54
|
].concat(
|
|
53
|
-
Glob.sync(Path.join(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
55
|
+
//Glob.sync(Path.join(config.pluginSrcPath, '/**/*.s?(a|c)ss')).length
|
|
56
|
+
// ? new StyleLintPlugin({
|
|
57
|
+
// files: '**/Pxsw*/**/*.s?(a|c)ss',
|
|
58
|
+
// failOnError: false,
|
|
59
|
+
// fix: false,
|
|
60
|
+
// configFile: Path.join(__dirname, 'stylelint.config.js'),
|
|
61
|
+
// })
|
|
62
|
+
// : [],
|
|
63
|
+
[]
|
|
61
64
|
),
|
|
62
65
|
stats: 'normal',
|
|
63
66
|
};
|
|
64
67
|
|
|
65
|
-
module.exports =
|
|
68
|
+
module.exports = productionConfig;
|
|
@@ -1,40 +1,32 @@
|
|
|
1
|
+
const config = require('./config');
|
|
2
|
+
|
|
1
3
|
const Path = require('path'),
|
|
2
|
-
Fs = require('fs'),
|
|
3
4
|
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
5
|
ChangeCase = require('change-case'),
|
|
12
6
|
Consola = require('consola'),
|
|
13
7
|
Sw6PluginMapEmitterPlugin = require('@pixolith/webpack-sw6-plugin-map-emitter'),
|
|
14
8
|
Entry = require('webpack-glob-entry'),
|
|
15
9
|
SvgStorePlugin = require('@pixolith/external-svg-sprite-loader'),
|
|
16
|
-
publicPath = process.env.PUBLIC_PATH,
|
|
17
|
-
ASSET_URL = process.env.ASSET_URL || '/',
|
|
18
10
|
outputConfig = {
|
|
19
|
-
path:
|
|
20
|
-
publicPath:
|
|
11
|
+
path: config.outputPath,
|
|
12
|
+
publicPath: config.assetUrl,
|
|
21
13
|
chunkFilename: (chunkData) => {
|
|
22
14
|
return `js/chunk[name]${
|
|
23
|
-
isProd ? '.[contenthash
|
|
15
|
+
config.isProd ? '.[contenthash]' : ''
|
|
24
16
|
}.js`;
|
|
25
17
|
},
|
|
26
18
|
filename: (chunkData) => {
|
|
27
19
|
return `js/${chunkData.chunk.name.toLowerCase()}${
|
|
28
|
-
isProd ? `.[contenthash
|
|
20
|
+
config.isProd ? `.[contenthash]` : ''
|
|
29
21
|
}.js`;
|
|
30
22
|
},
|
|
31
23
|
},
|
|
32
24
|
miniCssChunksConfig = {
|
|
33
25
|
filename: `css/[name]${
|
|
34
|
-
isProd ? '.[contenthash
|
|
26
|
+
config.isProd ? '.[contenthash]' : ''
|
|
35
27
|
}.css`,
|
|
36
28
|
chunkFilename: `css/[name].vendor${
|
|
37
|
-
isProd ? '.[contenthash
|
|
29
|
+
config.isProd ? '.[contenthash]' : ''
|
|
38
30
|
}.css`
|
|
39
31
|
};
|
|
40
32
|
|
|
@@ -42,39 +34,38 @@ module.exports = {
|
|
|
42
34
|
entry: () => {
|
|
43
35
|
let entriesPlugins = Entry(
|
|
44
36
|
(filePath) =>
|
|
45
|
-
ChangeCase.
|
|
46
|
-
filePath.match(
|
|
37
|
+
ChangeCase.kebabCase(
|
|
38
|
+
filePath.match(config.pluginMatch)[1],
|
|
47
39
|
),
|
|
48
|
-
Path.resolve(
|
|
40
|
+
Path.resolve(config.pluginSrcPath, 'index.js'),
|
|
49
41
|
);
|
|
50
42
|
|
|
51
43
|
let entriesVendor = Entry(
|
|
44
|
+
(filePath) =>
|
|
45
|
+
ChangeCase.kebabCase(
|
|
46
|
+
filePath.match(config.vendorMatch)[1],
|
|
47
|
+
),
|
|
48
|
+
Path.resolve(config.vendorSrcPath, 'index.js'),
|
|
49
|
+
);
|
|
50
|
+
|
|
51
|
+
let routeSplitEntriesPlugins = Entry(
|
|
52
|
+
(filePath) => filePath.split('/').pop().replace('.index.scss', '').replace('.', '_'),
|
|
53
|
+
Path.resolve(config.pluginRouteSplitPath, '*index.scss'),
|
|
54
|
+
);
|
|
55
|
+
let routeSplitEntriesVendor = Entry(
|
|
52
56
|
(filePath) =>
|
|
53
57
|
ChangeCase.paramCase(
|
|
54
|
-
filePath.match(
|
|
58
|
+
filePath.match(config.vendorMatch)[1],
|
|
55
59
|
),
|
|
56
|
-
Path.resolve(
|
|
60
|
+
Path.resolve(config.vendorRouteSplitPath, 'route-splitting/*/*index.scss'),
|
|
57
61
|
);
|
|
58
62
|
|
|
59
|
-
if (
|
|
63
|
+
if (config.isDebug) {
|
|
60
64
|
Consola.info('[DEBUG]: Webpack entry points:');
|
|
61
|
-
|
|
65
|
+
console.table({ ...entriesPlugins, ...entriesVendor, ...routeSplitEntriesPlugins, ...routeSplitEntriesVendor });
|
|
62
66
|
}
|
|
63
67
|
|
|
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
|
-
},
|
|
68
|
+
return { ...entriesPlugins, ...entriesVendor, ...routeSplitEntriesPlugins, ...routeSplitEntriesVendor };
|
|
78
69
|
},
|
|
79
70
|
module: {
|
|
80
71
|
// loader order is from right to left or from bottom to top depending on the notation but basicly always reverse
|
|
@@ -132,8 +123,8 @@ module.exports = {
|
|
|
132
123
|
options: {
|
|
133
124
|
name: 'sprite/sprite.svg',
|
|
134
125
|
iconName: '[name]',
|
|
135
|
-
overrideOrder: spriteOrder,
|
|
136
|
-
ignoreIconsByName: ignoreIcons,
|
|
126
|
+
overrideOrder: config.spriteOrder,
|
|
127
|
+
ignoreIconsByName: config.ignoreIcons,
|
|
137
128
|
onlySymbols: true,
|
|
138
129
|
},
|
|
139
130
|
},
|