crootfast/webProject/webPackServer/build.js

大前端工程化命令行脚手架

'use strict';
require("./common/alias");
console.log('build...');

const webpack = require("webpack");
const { merge } = require("webpack-merge");
// const inquirer = require("inquirer");
//rimraf插件是用来执行UNIX命令rm和-rf，用来删除文件和文件夹的，清空旧文件
const rm = require('rimraf');
const colors = require("colors");
const loading = require('loading-cli');
const { setGlobal, getGlobal } = require("../../common/utils/path");
const { frameConfigPath } = require("./common/utils/joinPath");

async function webpackBuild() {
  // 如果直接输入了对应参数，则不用询问模式，后期考虑做成可视化的启动方案。
  if (process.env.npm_config_appname) {
    setGlobal("appname", process.env.npm_config_appname);
  }
  if (process.env.npm_config_env) {
    setGlobal("env", process.env.npm_config_env);
  }
  if (process.env.npm_config_frame) {
    setGlobal("frame", process.env.npm_config_frame);
  }

  const frame = getGlobal('frame');
  const appname = getGlobal('appname');

  const spinner = loading(colors.green(`正在构建 apps/${frame}/${appname} 项目...`));
  spinner.frame(["🕐", "🕑", "🕒", "🕓", "🕔", "🕕", "🕖", "🕗", "🕘", "🕙", "🕚"]);
  spinner.start();

  // 共用的基础配置
  const envConfig = require("./common/env.config");
  function buildRun() {
    // produce配置文件
    const productionConfig = require('./config/produce');
    const frameConfig = require(frameConfigPath(frame));
    const webpackBuildConfig = merge(productionConfig, frameConfig);
    // console.log('webpackBuildConfig', (webpackBuildConfig.plugins));

    // 执行webpack编译
    webpack(webpackBuildConfig, (err, stats) => {
      spinner.stop();
      // 如果有错误就抛出错误
      if (err) {
        throw new Error("webpack compilation error", err);
      }
      //process.stdout用来控制标准输出，也就是在命令行窗口向用户显示内容。它的write方法等同于console.log
      process.stdout.write(stats.toString({
        // 增加控制台颜色开关
        colors: true,
        //去掉内置模块信息
        modules: false,
        //去掉子模块
        children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
        //增加包信息（设置为 false 能允许较少的冗长输出）
        chunks: false,
        //去除包里内置模块的信息
        chunkModules: false
      }) + '\n\n');

      // 下面是编译失败时输出的信息
      if (stats.hasErrors()) {
        console.log(colors.red('  Build failed with errors.\n'))
        process.exit(1);
      }
      // 下面是编译成功的消息
      console.log(colors.cyan('  Build complete.\n'))
      console.log(colors.yellow(
        '  Tip: built files are meant to be served over an HTTP server.\n' +
        '  Opening index.html over file:// won\'t work.\n'
      ))
    });
  };

  rm(envConfig.build.assetsBuildPath, err => {
    if (err) {
      throw err;
    }
    buildRun();
  });

}
webpackBuild();