build 文件夾中的 build.js

 

// bulid.js是webpack的打包文件，通過配置package.json中的script來執行腳本。命令號npm run build即運行node build/build.js
'use strict'
require('./check-versions')() // 檢查node+npm的版本，引用./check-versions.js文件


//process.env是一個包含用戶環境信息的對象 NODE_ENV是用戶自定義的變量，用來判斷是開發環境還是生產環境
process.env.NODE_ENV = 'production'

const ora = require('ora') //ora:https://www.npmjs.com/package/ora  ora包用於顯示加載中的效果，類似於前端頁面的loading效果
const rm = require('rimraf') //rimraf模塊 以包的形式包裝rm -rf命令，用來刪除文件和文件夾的，不管文件是否為空
const path = require('path') //導入node的path模塊
const chalk = require('chalk') //地址：https://www.npmjs.com/package/chalk 導入chalk模塊 用來改變文字顏色
const webpack = require('webpack') //引入webpack模塊
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

const spinner = ora('building for production...') // 實現loading的模塊
spinner.start() //開始動畫

//rm方法刪除static文件夾
//path.join是將路徑片段以'\'連接成新的路徑，任何一個路徑片段有錯誤就會報錯
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err

  //構建webpackc
  webpack(webpackConfig, (err, stats) => {
    spinner.stop() //停止動畫
    if (err) throw err

    //process.stdout.write是標准輸出，相當於console.log
    process.stdout.write(stats.toString({
      colors: true, //增加控制卡顏色開關，即顯示不同顏色的字體
      modules: false, //是否增加內置模塊信息
      children: false, //如果您使用的是 ts-loader，將其設置為true將使TypeScript錯誤在構建過程中出現.
      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'
    ))
  })
})