@pixolith/webpack-sw6-config 11.0.9 → 12.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 (6) hide show
  1. package/package.json +11 -11
  2. package/src/config.js +46 -6
  3. package/src/index.js +205 -7
  4. package/src/webpack.config.administration.js +92 -160
  5. package/src/webpack.config.dev.js +162 -167
  6. package/src/webpack.config.storefront.js +169 -154
package/src/webpack.config.storefront.js CHANGED
@@ -1,192 +1,207 @@
1
1
  const config = require('./config');
2
2
 
3
3
  const Path = require('path'),
4
+ Fs = require('fs'),
4
5
  MiniCssExtractPlugin = require('mini-css-extract-plugin'),
5
6
  ChangeCase = require('change-case'),
6
7
  Consola = require('consola'),
7
8
  Sw6PluginMapEmitterPlugin = require('@pixolith/webpack-sw6-plugin-map-emitter'),
8
- Entry = require('webpack-glob-entry'),
9
- SvgStorePlugin = require('@pixolith/external-svg-sprite-loader'),
10
- outputConfig = {
9
+ SvgStorePlugin = require('@pixolith/external-svg-sprite-loader');
10
+
11
+ module.exports = function createStorefrontConfig(themeOptions) {
12
+ let themeName = themeOptions && themeOptions.themeName;
13
+ let themeSlug = themeName ? ChangeCase.kebabCase(themeName) : 'storefront';
14
+
15
+ let outputConfig = {
11
16
  path: config.outputPath,
12
17
  publicPath: config.assetUrl,
13
18
  chunkFilename: (chunkData) => {
14
- return `js/chunk[name]${
15
- config.isProd ? '.[contenthash]' : ''
16
- }.js`;
19
+ return `js/chunk[name]${config.isProd ? '.[contenthash]' : ''}.js`;
17
20
  },
18
21
  filename: (chunkData) => {
19
22
  return `js/${chunkData.chunk.name.toLowerCase()}${
20
23
  config.isProd ? `.[contenthash]` : ''
21
24
  }.js`;
22
25
  },
23
- },
24
- miniCssChunksConfig = {
25
- filename: `css/[name]${
26
- config.isProd ? '.[contenthash]' : ''
27
- }.css`,
26
+ uniqueName: themeSlug,
27
+ };
28
+
29
+ let miniCssChunksConfig = {
30
+ filename: `css/[name]${config.isProd ? '.[contenthash]' : ''}.css`,
28
31
  chunkFilename: `css/[name].vendor${
29
32
  config.isProd ? '.[contenthash]' : ''
30
- }.css`
33
+ }.css`,
31
34
  };
32
35
 
33
- module.exports = {
34
- entry: () => {
35
- let entriesPlugins = Entry(
36
- (filePath) =>
37
- ChangeCase.kebabCase(
38
- filePath.match(config.pluginMatch)[1],
39
- ),
40
- Path.resolve(config.pluginSrcPath, 'index.js'),
41
- );
36
+ // Per-theme sprite path to avoid collisions between compilers
37
+ let spritePath = `sprite/${themeSlug}-sprite.svg`;
42
38
 
43
- let entriesVendor = Entry(
44
- (filePath) =>
45
- ChangeCase.kebabCase(
46
- filePath.match(config.vendorMatch)[1],
47
- ),
48
- Path.resolve(config.vendorSrcPath, 'index.js'),
39
+ let entryFn = () => {
40
+ let entryDir = Path.join(
41
+ config.outputPath,
42
+ '.theme-entries',
43
+ themeSlug,
49
44
  );
50
45
 
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(
56
- (filePath) => filePath.split('/').pop().replace('.index.scss', '').replace('.', '_'),
57
- Path.resolve(config.vendorRouteSplitPath, '*index.scss'),
58
- );
46
+ let entries = {};
47
+
48
+ // Main theme entry
49
+ let mainEntry = Path.join(entryDir, 'index.js');
50
+ if (Fs.existsSync(mainEntry)) {
51
+ entries[themeSlug] = mainEntry;
52
+ }
53
+
54
+ // Route-split SCSS entries
55
+ let routeSplitFiles = Fs.existsSync(entryDir)
56
+ ? Fs.readdirSync(entryDir).filter(
57
+ (f) => f.endsWith('.index.scss') && f !== 'index.scss',
58
+ )
59
+ : [];
60
+
61
+ routeSplitFiles.forEach((file) => {
62
+ let routeName = file.replace('.index.scss', '');
63
+ let entryName = themeSlug + '_' + routeName;
64
+ entries[entryName] = Path.join(entryDir, file);
65
+ });
59
66
 
60
67
  if (config.isDebug) {
61
- Consola.info('[DEBUG]: Webpack entry points:');
62
- console.table({ ...entriesPlugins, ...entriesVendor, ...routeSplitEntriesPlugins, ...routeSplitEntriesVendor });
68
+ Consola.info(`[${themeName || themeSlug}] Webpack entry points:`);
69
+ console.table(entries);
63
70
  }
64
71
 
65
- return { ...entriesPlugins, ...entriesVendor, ...routeSplitEntriesPlugins, ...routeSplitEntriesVendor };
66
- },
67
- // -.- hardcoded fix for zbar-wasm and issue https://github.com/webpack/webpack/issues/16878
68
- resolve: {
69
- conditionNames: [
70
- 'zbar-inlined',
71
- 'browser',
72
- 'import',
73
- 'require',
74
- 'default',
75
- ],
76
- },
77
-
78
- module: {
79
- rules: [
80
- {
81
- // -.- hardcoded fix for zbar-wasm and issue https://github.com/webpack/webpack/issues/16878
82
- test: /\.m?js$/,
83
- include: /node_modules[\\/]@undecaf[\\/]zbar-wasm/,
84
- enforce: 'pre',
85
- use: [
86
- {
87
- loader: 'string-replace-loader',
88
- options: {
89
- search: 'new URL("./",import.meta.url)',
90
- replace: '"/"',
72
+ return entries;
73
+ };
74
+
75
+ return {
76
+ name: themeSlug,
77
+ entry: entryFn,
78
+ // -.- hardcoded fix for zbar-wasm and issue https://github.com/webpack/webpack/issues/16878
79
+ resolve: {
80
+ conditionNames: [
81
+ 'zbar-inlined',
82
+ 'browser',
83
+ 'import',
84
+ 'require',
85
+ 'default',
86
+ ],
87
+ },
88
+
89
+ module: {
90
+ rules: [
91
+ {
92
+ // -.- hardcoded fix for zbar-wasm and issue https://github.com/webpack/webpack/issues/16878
93
+ test: /\.m?js$/,
94
+ include: /node_modules[\\/]@undecaf[\\/]zbar-wasm/,
95
+ enforce: 'pre',
96
+ use: [
97
+ {
98
+ loader: 'string-replace-loader',
99
+ options: {
100
+ search: 'new URL("./",import.meta.url)',
101
+ replace: '"/"',
102
+ },
91
103
  },
92
- },
93
- ],
94
- },
95
- {
96
- test: /\.js$/,
97
- exclude: (file) => {
98
- return /node_modules/.test(file);
104
+ ],
99
105
  },
100
- use: [
101
- {
102
- loader: 'swc-loader',
103
- options: {
104
- env: {
105
- mode: 'entry',
106
- coreJs: '3.34.0',
107
- // .browserlist settings are not found by swc-loader, so we load it manually: https://github.com/swc-project/swc/issues/3365
108
- targets: require('browserslist').loadConfig({
109
- config: './package.json',
110
- }),
111
- },
112
- jsc: {
113
- parser: {
114
- syntax: 'typescript',
106
+ {
107
+ test: /\.js$/,
108
+ exclude: (file) => {
109
+ return /node_modules/.test(file);
110
+ },
111
+ use: [
112
+ {
113
+ loader: 'swc-loader',
114
+ options: {
115
+ env: {
116
+ mode: 'entry',
117
+ coreJs: '3.34.0',
118
+ // .browserlist settings are not found by swc-loader, so we load it manually: https://github.com/swc-project/swc/issues/3365
119
+ targets: require('browserslist').loadConfig(
120
+ {
121
+ config: './package.json',
122
+ },
123
+ ),
115
124
  },
116
- transform: {
117
- // NEXT-30535 - Restore babel option to not use defineProperty for class fields.
118
- // Previously (in v6.5.x) this was done by `@babel/preset-typescript` automatically.
119
- useDefineForClassFields: false,
125
+ jsc: {
126
+ parser: {
127
+ syntax: 'typescript',
128
+ },
129
+ transform: {
130
+ // NEXT-30535 - Restore babel option to not use defineProperty for class fields.
131
+ // Previously (in v6.5.x) this was done by `@babel/preset-typescript` automatically.
132
+ useDefineForClassFields: false,
133
+ },
120
134
  },
121
135
  },
122
136
  },
137
+ ],
138
+ },
139
+ {
140
+ test: /\.(jpe?g|png|gif|ico)(\?v=\d+\.\d+\.\d+)?$/,
141
+ type: 'asset/resource',
142
+ generator: {
143
+ filename: 'img/[name][ext]',
123
144
  },
124
- ],
125
- },
126
- {
127
- test: /\.(jpe?g|png|gif|ico)(\?v=\d+\.\d+\.\d+)?$/,
128
- type: 'asset/resource',
129
- generator: {
130
- filename: 'img/[name][ext]'
131
- }
132
- },
133
- {
134
- test: /\.(eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/,
135
- type: 'asset/resource',
136
- generator: {
137
- filename: 'fonts/[name][ext]'
138
- }
139
- },
140
- {
141
- test: /\.svg$/,
142
- use: [
143
- {
144
- loader: SvgStorePlugin.loader,
145
- options: {
146
- name: 'sprite/sprite.svg',
147
- iconName: '[name]',
148
- overrideOrder: config.spriteOrder,
149
- ignoreIconsByName: config.ignoreIcons,
150
- onlySymbols: true,
151
- },
145
+ },
146
+ {
147
+ test: /\.(eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/,
148
+ type: 'asset/resource',
149
+ generator: {
150
+ filename: 'fonts/[name][ext]',
152
151
  },
153
- {
154
- loader: 'svgo-loader',
155
- options: {
156
- plugins: [
157
- 'cleanupAttrs',
158
- 'removeDoctype',
159
- 'removeXMLProcInst',
160
- 'cleanupEnableBackground',
161
- 'convertStyleToAttrs',
162
- 'convertPathData',
163
- 'cleanupIds',
164
- 'minifyStyles',
165
- 'removeUselessDefs',
166
- 'convertShapeToPath',
167
- 'removeUnusedNS',
168
- 'removeDimensions',
169
- 'convertTransform',
170
- 'collapseGroups',
171
- 'removeComments',
172
- 'removeEditorsNSData',
173
- 'removeUnknownsAndDefaults',
174
- ],
152
+ },
153
+ {
154
+ test: /\.svg$/,
155
+ use: [
156
+ {
157
+ loader: SvgStorePlugin.loader,
158
+ options: {
159
+ name: spritePath,
160
+ iconName: '[name]',
161
+ overrideOrder: config.spriteOrder,
162
+ ignoreIconsByName: config.ignoreIcons,
163
+ onlySymbols: true,
164
+ },
175
165
  },
176
- },
177
- ],
178
- },
166
+ {
167
+ loader: 'svgo-loader',
168
+ options: {
169
+ plugins: [
170
+ 'cleanupAttrs',
171
+ 'removeDoctype',
172
+ 'removeXMLProcInst',
173
+ 'cleanupEnableBackground',
174
+ 'convertStyleToAttrs',
175
+ 'convertPathData',
176
+ 'cleanupIds',
177
+ 'minifyStyles',
178
+ 'removeUselessDefs',
179
+ 'convertShapeToPath',
180
+ 'removeUnusedNS',
181
+ 'removeDimensions',
182
+ 'convertTransform',
183
+ 'collapseGroups',
184
+ 'removeComments',
185
+ 'removeEditorsNSData',
186
+ 'removeUnknownsAndDefaults',
187
+ ],
188
+ },
189
+ },
190
+ ],
191
+ },
192
+ ],
193
+ },
194
+ output: outputConfig,
195
+ plugins: [
196
+ new Sw6PluginMapEmitterPlugin({
197
+ includes: ['js', 'css'],
198
+ ignoreFiles: [/.*icons.*\.js/, /.*chunk.*\.js/],
199
+ filename: `var/px_plugins_${themeSlug}.json`,
200
+ }),
201
+
202
+ new SvgStorePlugin(),
203
+
204
+ new MiniCssExtractPlugin(miniCssChunksConfig),
179
205
  ],
180
- },
181
- output: outputConfig,
182
- plugins: [
183
- new Sw6PluginMapEmitterPlugin({
184
- includes: ['js', 'css'],
185
- ignoreFiles: [/.*icons.*\.js/, /.*chunk.*\.js/],
186
- }),
187
-
188
- new SvgStorePlugin(),
189
-
190
- new MiniCssExtractPlugin(miniCssChunksConfig),
191
- ],
206
+ };
192
207
  };