@aniyajs/rotor/webpack/webpackStartServer.js

基于webpack5开发的一款专注于打包、运行的工具

// 抛出所有未被捕获的错误
process.on("unhandledRejection", (error) => {
  throw error;
});

const paths = require("../utils/paths");
const fs = require("fs-extra");
const webpack = require("webpack");
const semver = require("semver");
const WebpackDevServer = require("webpack-dev-server");
const { checkBrowsers } = require("../utils/browsHelper");
const { clearConsole } = require("../utils/common");
const openBrowser = require("../utils/openBrowser");
const {
  choosePort,
  prepareUrls,
  createCompiler,
} = require("../utils/webpackDevServerUtils");
const clientEnv = require("./env")();
const path = require("path");

delete require.cache[require.resolve("../webpack/defaultConfig")];
const defaultConfig = require("../webpack/defaultConfig")(
  paths.appConfigTempIndexJs,
);
const WebpackDevServerConfig = require("./webpackDevServer.config");
const chalk = require("chalk");

const isInteractive = process.stdout.isTTY;

const DEFAULT_PORT = defaultConfig.devServer.port;
const HOST = defaultConfig.devServer.host;
const PROTOCOL = defaultConfig.devServer.https ? "https" : "http";
const fastRefresh = defaultConfig.fastRefresh;
const open = defaultConfig.open;

const useTypeScript = fs.existsSync(paths.appTsConfig);
const useYarn = fs.existsSync(paths.yarnLockFile);

const appName = require(paths.appPackageJson).name;
const appVersion = require(paths.appPackageJson).version;

const react = require(require.resolve("react", { paths: [paths.appPath] }));

let mockData = {};
if (fs.existsSync(paths.appMockTempIndexJs)) {
  mockData = Object.values(require(paths.appMockTempIndexJs)).reduce(
    (pre, cur) => Object.assign(pre, { ...cur }),
    {},
  );
}

if (HOST != "0.0.0.0" && HOST != "localhost") {
  console.log();
  console.log(chalk.cyan(`尝试绑定到当前主机：${chalk.yellow.bold(HOST)}。`));
  console.log(
    `如果不是故意的，检查你的 ${chalk.bold("devServer.host")} 配置。`,
  );
  console.log(
    `详细信息请参考：${chalk.yellow(
      "https://webpack.docschina.org/configuration/dev-server/#devserverhost",
    )}.`,
  );
  console.log();
}

// 指定browserslist配置
checkBrowsers(paths.appPath, isInteractive)
  .then(() => {
    if (isInteractive) {
      clearConsole();
    }

    // 获取端口
    return choosePort(HOST, DEFAULT_PORT);
  })
  .then((port) => {
    // 未找到端口
    if (port == null) {
      return;
    }

    console.log(chalk.cyan("Start development server..."));

    const urls = prepareUrls(
      PROTOCOL,
      HOST,
      port,
      paths.publicUrlOrPath.slice(0, -1),
    );

    // 创建自定义消息的编译器
    const compiler = createCompiler({
      webpack,
      latestConfig: clientEnv.latestConfig,
      useTypeScript,
      appName,
      appVersion,
      urls,
      useYarn,
    });

    const serverConfig = {
      ...WebpackDevServerConfig(HOST, defaultConfig.proxy, mockData),
      host: HOST,
      port,
    };

    /** @type { import('webpack-dev-server') } */
    const devServer = new WebpackDevServer(serverConfig, compiler);

    devServer.startCallback(() => {
      if (isInteractive) {
        clearConsole();
      }

      if (fastRefresh && semver.lt(react.version, "16.9.0")) {
        console.log(
          chalk.yellow(
            `快速刷新需要React 16.9或更高版本。你在使用React${react.version}.`,
          ),
        );
      }

      // open && openBrowser(urls.localUrlForBrowser);
    });

    ["SIGINT", "SIGTERM"].forEach(function (sig) {
      process.on(sig, function () {
        devServer.close();
        process.exit();
      });
    });
  })
  .catch((err) => {
    console.log(err);
    process.exit(1);
  });