const fs = require('fs');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

function getPugHtmlPluginEntries(basepath) {
    const pugTemplateFiles = fs.readdirSync(basepath)
        .filter(file => path.extname(file).toLowerCase() === '.pug');

    return pugTemplateFiles.map(pugFileName => new HtmlWebpackPlugin({
        inject: true,
        hash: false,
        filename: `${path.parse(pugFileName).name}.html`,
        template: path.join(basepath, pugFileName),
    }));
}

module.exports = (env, argv) => {
    const isDevelopment = argv.mode === 'development';

    return {
        entry: {
            app: './src/js/app.js',
        },
        output: {
            path: path.resolve(__dirname, 'build'),
            filename: "[name].bundle.js",
        },
        devServer: {
            port: 3000,
        },
        plugins: [
            ...getPugHtmlPluginEntries('./src'),
            new MiniCssExtractPlugin({
                filename: isDevelopment ? '[name].css' : '[name].[hash].css',
                chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css',
            }),
        ],
        module: {
            rules: [
                {
                    test: /\.pug$/,
                    use: ["pug-loader"],
                },
                {
                    test: /\.scss$/,
                    use: [
                        isDevelopment ? "style-loader" : MiniCssExtractPlugin.loader,
                        "css-loader",
                        {
                            loader: "sass-loader",
                            options: {
                                sourceMap: isDevelopment,
                            },
                        },
                    ],
                },
            ],
        },
        resolve: {
            extensions: ['.js', '.scss'],
        },
    };
}