import scriptEntries from "./helpers/scriptEntries";
import paths from "./helpers/paths";
import getEnv from "./helpers/getEnv";

const fs = require("fs");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

const additionalPlugins = [];

if (fs.existsSync(paths.publicDir) && fs.readdirSync(paths.publicDir).length > 0) {
    additionalPlugins.push(new CopyWebpackPlugin({ patterns: [{ from: "./public" }] }));
}

const createWebpackConfig = (env: "production" | "development", pagePlugins) => {
    const isDev = env === "development";

    return {
        mode: env,
        entry: {
            ...scriptEntries
        },
        output: {
            path: paths.dist,
            filename: "[name].[contenthash].js",
            clean: true,
            assetModuleFilename: "[name][ext]"
        },
        devtool: isDev ? "source-map" : false, // .js.map file-t hoz létre a debuggoláshoz
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        // "style-loader",
                        {
                            loader: "css-loader",
                            options: {
                                sourceMap: isDev
                            }
                        },
                        {
                            loader: "sass-loader",
                            options: {
                                sourceMap: isDev
                            }
                        }
                    ]
                },
                {
                    test: /\.js$/,
                    exclude: /node-modules/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: ["@babel/preset-env"]
                        }
                    }
                },
                {
                    test: /\.(png|svg|jpg|jpeg|gif)$/i,
                    use: [
                        {
                            loader: require.resolve("url-loader"),
                            options: {
                                esModule: false,
                                limit: 1024,
                                // outputPath: "media",
                                // publicPath: "/media",
                                name: "[name].[contenthash:8].[ext]"
                            }
                        }
                    ]
                },
                {
                    test: /\.hbs$/,
                    loader: "handlebars-loader"
                }
            ]
        },
        devServer: isDev
            ? {
                  static: {
                      directory: paths.dist
                  },
                  port: getEnv().DEV_SERVER_POST || 3000,
                  hot: true,
                  compress: true,
                  historyApiFallback: true
              }
            : undefined,
        plugins: [
            new MiniCssExtractPlugin({
                filename: "[name].[contenthash].css",
                chunkFilename: "[id].css"
            }),
            ...pagePlugins,
            ...additionalPlugins
        ]
    };
};

export default createWebpackConfig;