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: /\.m?js$/,
                //     exclude: /node_modules/,
                //     use: {
                //         loader: 'babel-loader',
                //         options: {
                //             presets: [
                //                 ['@babel/preset-env', { targets: { chrome: "58", ie: "11" }}]
                //             ]
                //         }
                //     }
                // }
                // For newer versions of Webpack it should be
                {
                    test: /\.(jpe?g|png|gif|svg)$/i, 
                    loader: 'file-loader',
                    options: {
                        name: 'public/icons/[name].[ext]'
                    }
                }
            ],
        },
        plugins: [
            new HtmlWebpackPlugin({
                title: 'Thrive',
                template: 'src/index.html'
            }),
        ],
    }
};