import path from "path";
import { merge } from "webpack-merge";
import webpack, { Configuration as WebpackConfiguration } from "webpack";
import WebpackDevServer from "webpack-dev-server";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";
import baseConfig from "./webpack.common";
import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
import { proxyMap } from "./dev.proxy";
/**
 * 运行命令的时候重启一次打开一个tab 页很烦，所以呢优化一下
 * 参考：create-react-app 的启动方式
 * https://github.com/facebook/create-react-app/blob/main/packages/react-dev-utils/openChrome.applescript
 * 记得关闭webpack-dev-server的配置中的自动打开 open: false 或者注释
 */

// import openBrowser from "./util/openBrowser";

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration;
}

const host = "127.0.0.1";
const port = 9000;

// 合并公共配置,并添加开发环境配置
const devConfig: Configuration = merge(baseConfig, {
  mode: "development", // 开发模式,打包更加快速,省了代码优化步骤
  /**
   * 开发环境推荐：eval-cheap-module-source-map
   * 本地开发首次打包慢点没关系,因为 eval 缓存的原因, 热更新会很快
   * 开发中,我们每行代码不会写的太长,只需要定位到行就行,所以加上 cheap
   * 我们希望能够找到源代码的错误,而不是打包后的,所以需要加上 module
   */
  devtool: "eval-cheap-module-source-map",
  stats: "errors-only",
  plugins: [
    new ReactRefreshWebpackPlugin({ overlay: false }), // 添加热更新插件
    new FriendlyErrorsWebpackPlugin(),
  ],
});

const devServer = new WebpackDevServer(
  {
    host, // 地址
    port, // 端口
    open: false, // 是否自动打开，关闭
    setupExitSignals: true, // 允许在 SIGINT 和 SIGTERM 信号时关闭开发服务器和退出进程。
    compress: false, // gzip压缩,开发环境不开启,提升热更新速度
    hot: true, // 开启热更新，后面会讲react模块热替换具体配置
    historyApiFallback: true, // 解决history路由404问题
    static: {
      directory: path.join(__dirname, "../public"), // 托管静态资源public文件夹
    },
    headers: { "Access-Control-Allow-Origin": "*" },
    proxy: proxyMap,
    client: {
      progress: true,
    },
  },
  webpack(devConfig)
);

devServer.start().then(() => {
  // 启动界面
  // openBrowser(`http://${host}:${port}`);
});

export default devConfig;