// webpack.config.js
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    mode: "development",
    entry: {
        main: "./src/app.js",
    },
    output: {
        filename: "[name].js",
        path: path.resolve("./dist"),
    },
    devServer: {
        overlay: true,
        stats: "errors-only",
        proxy: {
            "/api": "http://localhost:8081",
        },
        // TODO: 여기에 핫로딩을 설정하세요
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    process.env.NODE_ENV === "production"
                        ? MiniCssExtractPlugin.loader // 프로덕션 환경
                        : "style-loader", // 개발 환경
                    "css-loader",
                    "sass-loader",
                ],
            },
            {
                test: /\.(png|jpg|svg|gif)$/,
                loader: "url-loader",
                options: {
                    name: "[name].[ext]?[hash]",
                    limit: 10000, // 10Kb
                },
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader", // 바벨 로더를 추가한다
            },
        ],
    },
    plugins: [
        new webpack.BannerPlugin({
            banner: `빌드 날짜: ${new Date().toLocaleString()}`,
        }),
        new webpack.DefinePlugin({}),
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            templateParameters: {
                env: process.env.NODE_ENV === "development" ? "(개발용)" : "",
            },
            minify:
                process.env.NODE_ENV === "production"
                    ? {
                          collapseWhitespace: true, // 빈칸 제거
                          removeComments: true, // 주석 제거
                      }
                    : false,
            hash: process.env.NODE_ENV === "production",
        }),
        new CleanWebpackPlugin(),
        ...(process.env.NODE_ENV === "production"
            ? [new MiniCssExtractPlugin({ filename: `[name].css` })]
            : []),
    ],
};

// webpack.config.js
module.exports = {
    devServer: {
        overlay: true,
        stats: "errors-only",
        proxy: {
            "/api": "http://localhost:8081",
        },
        hot: true,
    }
}