// 主要是__dirname, __filename字段的獲取
import path, { dirname } from 'node:path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

import HtmlWebpackPlugin from 'html-webpack-plugin';

export default {
  target: "web",
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    publicPath: "/",
    filename: "index.js",
  },
  resolve: {
    extensions: [".ts", ".tsx", ".json", ".js"],
  },
  module: {
    rules: [],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "/public/index.html"),
      scriptLoading: "blocking",
      inject: "head",
    }),
  ],
  devServer: {
    static: {
      // https://webpack.docschina.org/configuration/dev-server/#directory
      // 告訴服務(wù)器從哪里提供內(nèi)容。只有在你希望提供靜態(tài)文件時才需要這樣做。static.publicPath 將會被用來決定應該從哪里提供 bundle，并具有優(yōu)先級。
      directory: path.join(__dirname, "public"),
      // 告訴服務(wù)器在哪個 URL 上提供 static.directory 的內(nèi)容。 (靜態(tài)資源)
      // 配置了下面的內(nèi)容的話, 可以訪問: http://localhost:8080/dist/webpack.html  拿到的會是沒有注入代碼的原生靜態(tài)代碼
      publicPath: "/dist",
    },
    hot: true,
    port: "8080",
    open: true,
    proxy: {
      "/api": {
        target: "",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
};