begin print

web/themes/custom/eql/webpack.config.js

@@ -1,41 +1,189 @@
+// const webpack = require("webpack");
+// const path = require("path");
+
+// let config = {
+//     mode: 'development',
+//     entry: [
+//         "./scripts/main.js",
+//         "./scripts/extlink.js",
+//         "./scss/styles.scss",
+
+//     ],
+    
+//     output: {
+//         path: path.resolve(__dirname, "./dist/assets"),
+//         filename: "./bundle.js"
+//     },
+
+//     module: {
+//         rules: [
+//             {
+//                 test: /\.scss$/i,
+//                 use: [
+//                     {
+//                         loader: 'file-loader',
+//                         options: {
+//                             name: './css/bundle.css',
+//                         }
+//                     },
+//                     // Compile le Sass en CSS
+//                     "sass-loader"
+//                 ],
+//             },
+//         ],
+//     }
+// }
+
+
+
+
+
+// module.exports = config;
+
+
+// const webpack = require("webpack");
+// const path = require("path");
+// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+// let config = {
+//     mode: 'development',
+
+//     entry: [
+//         "./scripts/main.js",
+//         "./scripts/extlink.js",
+//         "./scss/styles.scss",
+//     ],
+    
+//     output: {
+//         path: path.resolve(__dirname, "./dist/assets"),
+//         filename: "./bundle.js",
+//     },
+
+//     module: {
+//         rules: [
+//             {
+//                 test: /\.scss$/i,
+//                 use: [
+//                     // Extract CSS to a separate file (instead of injecting with <style>)
+//                     MiniCssExtractPlugin.loader,
+//                     {
+//                         loader: "css-loader",
+//                         options: {
+//                             // Optional: if you don't want url() handling
+//                             // url: false,
+//                         },
+//                     },
+//                     {
+//                         loader: "sass-loader",
+//                         options: {
+//                             // Use Dart Sass and its modern JS API
+//                             implementation: require("sass"),
+//                         },
+//                     },
+//                 ],
+//             },
+//         ],
+//     },
+
+//     plugins: [
+//         new MiniCssExtractPlugin({
+//             filename: "./css/bundle.css", // same output path/name you had
+//         }),
+//     ],
+// };
+
+// module.exports = config;
+
+
+
 const webpack = require("webpack");
 const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+
 
 let config = {
-    mode: 'development',
+    mode: "development",
+
     entry: [
         "./scripts/main.js",
         "./scripts/extlink.js",
+        "./scripts/print.js",
         "./scss/styles.scss",
-
     ],
-    
+
     output: {
         path: path.resolve(__dirname, "./dist/assets"),
-        filename: "./bundle.js"
+        filename: "./bundle.js",
+        clean: true, // optional: clean dist between builds
     },
 
     module: {
         rules: [
+            // SCSS → CSS
             {
                 test: /\.scss$/i,
                 use: [
+                    MiniCssExtractPlugin.loader,
                     {
-                        loader: 'file-loader',
+                        loader: "css-loader",
                         options: {
-                            name: './css/bundle.css',
-                        }
+                            url: false,          // 👈 keep url(...) unchanged
+                            importLoaders: 1,
+                            // url: true by default, so url(...) will be processed
+                        },
+                    },
+                    {
+                        loader: "sass-loader",
+                        options: {
+                            implementation: require("sass"), // Dart Sass, modern API
+                        },
                     },
-                    // Compile le Sass en CSS
-                    "sass-loader"
                 ],
             },
+
+            // Images in CSS (and JS)
+            {
+                test: /\.(png|jpe?g|gif|svg|webp)$/i,
+                type: "asset/resource",
+                generator: {
+                    filename: "./images/[name][hash][ext][query]",
+                },
+            },
+
+            // Fonts (if you use any)
+            {
+                test: /\.(woff2?|eot|ttf|otf)$/i,
+                type: "asset/resource",
+                generator: {
+                    filename: "./fonts/[name][hash][ext][query]",
+                },
+            },
         ],
-    }
-}
+    },
 
+    plugins: [
+        new MiniCssExtractPlugin({
+            filename: "./css/bundle.css", // same as before
+        }),
+        new CopyWebpackPlugin({
+            patterns: [
+              {
+                from: path.resolve(__dirname, "./fonts"),
+                to: "./fonts",
+              },
+              {
+                from: path.resolve(__dirname, "./images"),
+                to: "./images",
+              },
+            ],
+        }),
+    ],
 
+    // So you actually see what the 11 errors are if something else happens
+    stats: {
+        errorDetails: true,
+    },
+};
 
-
-
-module.exports = config;
+module.exports = config;