vue-cli 2.x项目模板文件说明（九）webpack下build.js 篇

本文介绍的是vue-cli2.x项目中，webpack下build.js文件各条命令含义，主要是在项目目录中执行npm run build时的设置。
项目结构参照vue-cli 2.x项目模板文件说明（一）整体结构篇
关于webpack我本人并没有进行过系统学习，边角料的碎片化学习慢慢来吧，聚沙成塔咯

'use strict'  // 严格模式
require('./check-versions')()  // 引入检查版本文件并立即执行

process.env.NODE_ENV = 'production' // 设置环境为生产环境

const ora = require('ora') // 引入ora
const rm = require('rimraf') // 引入rm
const path = require('path')   // 引入path
const chalk = require('chalk')  // 引入chalk
const webpack = require('webpack') // 引入webpack
const config = require('../config') // 引入项目中的config 目录
const webpackConfig = require('./webpack.prod.conf') // 引入webpack中生产环境配置

const spinner = ora('building for production...') // 设定ora内容
spinner.start() // 开始执行加载动画

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { // 删除dist以及static目录及所有文件
  if (err) throw err
  webpack(webpackConfig, (err, stats) => {
    spinner.stop()
    if (err) throw err
    process.stdout.write(stats.toString({  //  process.stdout.write与console.log相似
      colors: true,
      modules: false,
      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
      chunks: false, // 额外代码块终止
      chunkModules: false // 额外代码块的依赖模块
    }) + '\n\n')

    if (stats.hasErrors()) {
      console.log(chalk.red('  Build failed with errors.\n')) 
      process.exit(1)  // 强制退出进程
    }

    console.log(chalk.cyan('  Build complete.\n'))
    console.log(chalk.yellow(
      '  Tip: built files are meant to be served over an HTTP server.\n' +
      '  Opening index.html over file:// won\'t work.\n'
    ))
  })
})

各项引入文件解释
1、ora ： 这是一个用于node终端（命令行）加载动画以及图标的工具。
这是我本地一个项目运行npm run build时的截图
2、rm : 以包的形式包装rm -rf命令，用来删除文件和文件夹的，不管文件夹是否为空，都可删除
3、path ： path是nodejs的模块，提供了一些工具函数，用于处理文件与目录的路径
4、chalk ：修改控制台中字符串的样式（字体样式加粗等／字体颜色／背景颜色）
5、stat： webpack统计信息，chunk是 被entry所依赖的额外的代码块,可以包含一个或者多个文件