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

// 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",

    entry: [
        "./scripts/main.js",
        "./scripts/extlink.js",
        "./scripts/print.js",
        "./scss/styles.scss",
    ],

    output: {
        path: path.resolve(__dirname, "./dist/assets"),
        filename: "./bundle.js",
        clean: true, // optional: clean dist between builds
    },

    module: {
        rules: [
            // SCSS → CSS
            {
                test: /\.scss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            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
                        },
                    },
                ],
            },

            // 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;