命令行交互信息被webpack打包信息遮挡怎么办？

Question

问题描述

写了个webpack插件，在vscode终端运行打包命令npm run build时会先与用户交互提问（使用的是Inquirer.js），然后do something...。但是我的提示信息最底下一行会被打包时的Building for development...遮住：

问题出现的平台版本及自己尝试过哪些方法

尝试过：

1. 在问题描述后面加\n，但是当type为input时无法这样加。

2. 在type为list时加分割线new inquirer.Separator()，但是当type为input时也无法这样。

   const questions = [
      {
        type: "list",
        message: "请选择资源类型：",
        name: "resourcesType",
        choices: [
          {
            name: "全局资源",
            value: 0,
            short: "全局资源",
          },
          {
            name: "壳资源",
            value: 1,
            short: "壳资源",
          },
          {
            name: "模块资源\n", // 尝试加\n回车换行
            value: 2,
            short: "模块资源\n",
          },
          // new inquirer.Separator(),
        ],
      },
      {
        type: "input",
        message: "请输入此次更新备注：",
        name: "remarks",
      },

相关代码

粘贴代码文本（请勿用截图）

class HelloAsyncPlugin {
  constructor() {
    this.answer = null;
  }
  apply(compiler) {
    compiler.hooks.beforeRun.tapPromise(pluginName, (compilation) => {
      // 返回一个 pormise ，异步任务完成后 resolve
      return new Promise(async (resolve, reject) => {
        const answer = await this.ask();
        this.answer = answer
        resolve();
      });
    });
  }

  async ask() {
    const questions = [
      {
        type: "list",
        message: "请选择资源类型：",
        name: "resourcesType",
        choices: [
          {
            name: "全局资源",
            value: 0,
            short: "全局资源",
          },
          {
            name: "壳资源",
            value: 1,
            short: "壳资源",
          },
          {
            name: "模块资源",
            value: 2,
            short: "模块资源",
          },
          // new inquirer.Separator(),
        ],
      },
      {
        type: "input",
        message: "请输入此次更新备注：",
        name: "remarks",
      },
    ];
    const answer = await inquirer.prompt(questions, {});
    return answer
  }
}

你期待的结果是什么？实际看到的错误信息又是什么？

怎么样才能让prompt出来的信息不被webpack的默认打包信息挡住啊？
球球各位大佬了

Answer 1

你的需求是在打包时根据控制台的输入来提供给vue.config.js文件用，在webpack的生命周期中去做这个事不太合适，我来说下思路吧：

1. 根据控制台输入生成一个js文件，导出打包不同模块的js逻辑；然后在vue.config.js中引用
   node genJS.js & npm run build
2. 根据控制台的输入设置环境变量，然后在vue.config.js中根据环境变量执行相关的逻辑