import {
  resolve
} from "path";

import ESLintWebpackPlugin from "eslint-webpack-plugin"; // 引入 ESLint 插件
import HtmlWebpackPlugin from "html-webpack-plugin"; // 引入 html-webpack-plugin 插件

export const entry = "./src/.umi/umi.ts";
export const output = {
  // path: 文件输出目录，必须是绝对路径
  // path.resolve()方法返回一个绝对路径
  // __dirname 当前文件的文件夹绝对路径
  path: undefined,
  // filename: js文件输出文件名
  filename: "js/umi.ts",
  clean: true, // 自动将上次打包目录资源清空
};
export const module = {
  rules: [{
      // 用来匹配 .css 结尾的文件
      test: /\.css$/,
      // use 数组里面 Loader 执行顺序是从右到左
      use: ["style-loader", "css-loader"],
    },
    {
      // 用来匹配.less结尾的文件
      test: /\.less$/,
      use: ["style-loader", "css-loader", "less-loader"],
    },
    {
      test: /\.s[ac]ss$/,
      use: ["style-loader", "css-loader", "sass-loader"],
    },
    {
      // 用来匹配图片文件
      test: /\.(png|jpe?g|gif|webp)$/,
      type: "asset",
      parser: {
        dataUrlCondition: {
          maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
        },
      },
      generator: {
        // 将图片文件输出到 images 目录中
        // 将图片文件命名 [hash:8][ext][query]
        // [hash:8]: hash值取8位
        // [ext]: 使用之前的文件扩展名
        // [query]: 添加之前的query参数
        filename: "images/[hash:8][ext][query]",
      },
    },
    {
      test: /\.(ttf|woff2?|map4|map3|avi)$/,
      type: "asset/resource",
      generator: {
        filename: "media/[hash:8][ext][query]", // 输出到media目录中
      },
    },
    {
      test: /\.m?js/,
      resolve: {
        fullySpecified: false,
      },
    },
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          priority: -10,
          test: /[\\/]node_modules[\\/]/,
        },
      },
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
    },
  },
};
export const plugins = [
  new ESLintWebpackPlugin({
    // 指定检查文件的根目录
    context: resolve(__dirname, "../src"),
  }),
  new HtmlWebpackPlugin({
    // 以 public/index.html 为模板创建文件
    // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
    template: resolve(__dirname, "../public/index.html"),
  }),
];
export const devServer = {
  host: "localhost",
  port: "8888",
  open: true, // 是否自动打开浏览器
};
export const mode = "development";