const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = (env) => {
    return {
        mode: env.mode,
        devtool: 'inline-source-map',
        devServer: {
            static: './dist',
            hot: true,
        },
        module: {
            rules: [
                {
                    test: /\.css$/i,
                    use: [
                      // Creates `style` nodes from JS strings
                      "style-loader",
                      // Translates CSS into CommonJS
                      "css-loader",
                    ],
                },
                {
                    test: /\.s[ac]ss$/i,
                    use: [
                      // Creates `style` nodes from JS strings
                      "style-loader",
                      // Translates CSS into CommonJS
                      "css-loader",
                      // Compiles Sass to CSS
                      "sass-loader",
                    ],
                },
                {
                    test: /\.(jpe?g|png|gif|svg)$/i,
                    type: 'asset/resource',
                    generator: {
                        filename: 'public/icons/[name][ext]'
                    }
                }
            ],
        },
        plugins: [
            new HtmlWebpackPlugin({
                title: 'Thrive',
                template: 'src/index.html'
            }),
        ],
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'build'),
            clean: true,
        },
    }
};