const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 自动生成 HTML 文件

module.exports = {
    // 入口文件
    entry: './src/app/page.tsx',  // 将入口文件指定为 page.tsx

    // 输出配置
    output: {
        filename: 'bundle.js',  // 打包后的文件名
        path: path.resolve(__dirname, 'dist'),  // 输出文件的目录
    },

    // 模块解析
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json'],  // 支持 .ts, .tsx, .js, .json 文件
    },

    // 模块加载规则
    module: {
        rules: [
            {
                test: /\.tsx?$/,  // 匹配 TypeScript 和 JSX 文件
                use: 'ts-loader',  // 使用 ts-loader 转换 TypeScript 为 JavaScript
                exclude: /node_modules/,  // 排除 node_modules 目录
            },
            {
                test: /\.css$/,  // 匹配 CSS 文件
                use: ['style-loader', 'css-loader'],  // 使用 style-loader 和 css-loader 加载 CSS 文件
            },
            {
                test: /\.(jpg|jpeg|png|gif|svg)$/,  // 匹配图片文件
                use: ['file-loader'],  // 使用 file-loader 处理图片
            },
        ],
    },

    // 插件
    plugins: [
        new webpack.HotModuleReplacementPlugin(),  // 启用热更新插件
        new HtmlWebpackPlugin({
            template: './src/index.html',  // 自动生成 HTML 文件
            filename: 'index.html',  // 生成的文件名
        }),
    ],

    // 开发服务器配置
    devServer: {
        static: path.join(__dirname, 'dist'),  // 使用 static 配置替代 contentBase
        hot: true,  // 启用热更新
        open: true,  // 自动打开浏览器
        port: 8080,  // 设置开发服务器端口
        historyApiFallback: true,  // 支持单页应用（SPA）
    },

    // 开发模式设置
    mode: 'development',  // 开发模式
    devtool: 'source-map',  // 开启源码映射，方便调试
};