Merge pull request #39 from Accuraty/new-webpack-image-processing-imp…

…roved New webpack image processing - fixed and improved
Accuraty · Jan 5, 2025 · 4ae74d5 · 4ae74d5
2 parents 22cd377 + 730c6f8
commit 4ae74d5
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 74 deletions.
diff --git a/ABBV20xx.code-workspace b/ABBV20xx.code-workspace
@@ -70,7 +70,7 @@
     },
     "explorer.fileNesting.enabled": true,
     "explorer.fileNesting.patterns": {
-      "webpack.config.js": "webpack.*.config.js",
+      "webpack.config.js": "webpack.*.js",
       "*.code-workspace": ".env, .browserslistrc, .eslint*, .*.json, .git*, .editorconfig, .nvmrc, .*ignore, gulp*.js",
       "README.md": "READ*",
     }

diff --git a/webpack.generateEntries.js b/webpack.generateEntries.js
diff --git a/webpack.images.config.js b/webpack.images.config.js
@@ -2,37 +2,40 @@ import { resolve } from 'path';
 import ImageMinimizerPlugin from 'image-minimizer-webpack-plugin';
 import { fileURLToPath } from 'url';
 import path from 'path';
-import generateEntries from './webpack.generateEntries.js';
+import { globSync } from 'glob';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-const entries = generateEntries();
-
 const dnnThemeDestPath = 'dnn/Portals/_default/Skins';
 
+// Get source files relative to src/media
+const imageFiles = globSync('images/**/*.{png,jpg,jpeg,gif}', { cwd: './src/media' }).map(file => `./${file}`);
+const svgFiles = globSync('svg/**/*.svg', { cwd: './src/media' }).map(file => `./${file}`);
+
 export default {
   mode: 'production',
-  entry: entries,
+  context: resolve(__dirname, 'src/media'),
+  entry: [...imageFiles, ...svgFiles],
   output: {
     path: resolve(__dirname, dnnThemeDestPath, 'dist/media'),
-    filename: '[name][ext]', // Output filename pattern
-    assetModuleFilename: '[path][name][ext]', // Output asset filename pattern
-    clean: true, // Clean the output directory before emit
+    clean: true
   },
   module: {
-    rules: [
-      {
-        test: /\.(png|jpe?g|gif)$/i,
-        include: resolve(__dirname, 'src/media/images'),
-        type: 'asset/resource', // Use asset/resource for images
-      },
-      {
-        test: /\.svg$/i,
-        include: resolve(__dirname, 'src/media/svg'),
-        type: 'asset/resource', // Use asset/resource for SVGs
-      },
-    ],
+    rules: [{
+      test: /\.(png|jpe?g|gif)$/i,
+      type: 'asset/resource',
+      generator: {
+        filename: '[path][name][ext]'
+      }
+    },
+    {
+      test: /\.svg$/i,
+      type: 'asset/resource',
+      generator: {
+        filename: '[path][name][ext]'
+      }
+    }]
   },
   plugins: [
     new ImageMinimizerPlugin({
@@ -42,24 +45,19 @@ export default {
           plugins: [
             ['mozjpeg', { quality: 75 }],
             ['pngquant', { quality: [0.6, 0.8] }],
-            [
-              'svgo',
-              {
-                plugins: [
-                  {
-                    name: 'preset-default',
-                    params: {
-                      overrides: {
-                        removeViewBox: false,
-                      },
-                    },
-                  },
-                ],
-              },
-            ],
-          ],
-        },
-      },
-    }),
-  ],
+            ['svgo', {
+              plugins: [{
+                name: 'preset-default',
+                params: {
+                  overrides: {
+                    removeViewBox: false
+                  }
+                }
+              }]
+            }]
+          ]
+        }
+      }
+    })
+  ]
 };