一個DEMOS的完整目錄（由於GWF問題，我就不一一打開網站一個個去搜索並且解釋了）可以去關註：https://www.cnblogs.com/ye-hcj

build

　　build.js（本文來自https://www.cnblogs.com/ye-hcj/p/7096341.html）

1. 這個配置文件是命令npm run build 的入口配置文件，主要用於生產環境
2. 由於這是一個系統的配置文件，將涉及很多的模塊和插件，所以這部分內容我將分多個文章講解，請關註我博客的其他文章

 1 // npm和node版本檢查，請看我的check-versions配置文件解釋文章require(‘./check-versions‘)()
 

 2 
 3 // 設置環境變量為production
 4 process.env.NODE_ENV = ‘production‘
 5 
 6 // ora是一個命令行轉圈圈動畫插件，好看用的
 7 var ora = require(‘ora‘)
 8 // rimraf插件是用來執行UNIX命令rm和-rf的用來刪除文件夾和文件，清空舊的文件
 9 var rm = require(‘rimraf‘)
10 // node.js路徑模塊
11 var path = require(‘path‘)
12 // chalk插件，用來在命令行中輸入不同顏色的文字
13 var chalk = require(‘chalk‘)
 
14 // 引入webpack模塊使用內置插件和webpack方法
15 var webpack = require(‘webpack‘)
16 // 引入config下的index.js配置文件，此配置文件我之前介紹了請自行查閱，主要配置的是一些通用的選項
17 var config = require(‘../config‘)
18 // 下面是生產模式的webpack配置文件，請看我的webpack.prod.conf解釋文章
19 var webpackConfig = require(‘./webpack.prod.conf‘)
20 
21 // 開啟轉圈圈動畫
22 var spinner = ora(‘building for production...‘)
 
23 spinner.start()
24 
25 // 調用rm方法，第一個參數的結果就是 dist/static，表示刪除這個路徑下面的所有文件
26 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
27   // 如果刪除的過程中出現錯誤，就拋出這個錯誤，同時程序終止
28   if (err) throw err
29   // 沒有錯誤，就執行webpack編譯
30   webpack(webpackConfig, function (err, stats) {
31     // 這個回調函數是webpack編譯過程中執行
32     spinner.stop() // 停止轉圈圈動畫
33     if (err) throw err // 如果有錯誤就拋出錯誤
34     // 沒有錯誤就執行下面的代碼，process.stdout.write和console.log類似，輸出對象
35     process.stdout.write(stats.toString({
36       // stats對象中保存著編譯過程中的各種消息
37       colors: true, // 增加控制臺顏色開關
38       modules: false, // 不增加內置模塊信息
39       children: false, // 不增加子級信息
40       chunks: false, // 允許較少的輸出
41       chunkModules: false // 不將內置模塊的信息加到包信息
42     }) + ‘\n\n‘)
43     // 以上就是在編譯過程中，持續打印消息
44     // 下面是編譯成功的消息
45     console.log(chalk.cyan(‘  Build complete.\n‘))
46     console.log(chalk.yellow(
47       ‘  Tip: built files are meant to be served over an HTTP server.\n‘ +
48       ‘  Opening index.html over file:// won\‘t work.\n‘
49     ))
50   })
51 })

webpack官方文檔：https://webpack.js.org/concepts/

　　check-versions.js（本文來自https://www.cnblogs.com/ye-hcj/p/7096341.html）

 1 / 下面的插件是chalk插件，他的作用是在控制臺中輸出不同的顏色的字，大致這樣用chalk.blue(‘Hello world‘)，這款插件只能改變命令行中的字體顏色
 2 var chalk = require(‘chalk‘)
 3 // 下面這個是semver插件，是用來對特定的版本號做判斷的，比如
 4 // semver.gt(‘1.2.3‘,‘9.8.7‘) false 1.2.3版本比9.8.7版本低
 5 // semver.satisfies(‘1.2.3‘,‘1.x || >=2.5.0 || 5.0.0 - 7.2.3‘) true 1.2.3的版本符合後面的規則
 6 var semver = require(‘semver‘)
 7 // 下面是導入package.json文件,要使用裏面的engines選項，要註意require是直接可以導入json文件的，並且requrie返回的就是json對象
 8 var packageConfig = require(‘../package.json‘)
 9 // 下面這個插件是shelljs，作用是用來執行Unix系統命令
10 var shell = require(‘shelljs‘)
11 // 下面涉及了很多Unix命令，這裏可能解釋的不夠詳細，第一時間精力有限，第二能力有限。。。
12 function exec (cmd) {
13   //腳本可以通過 child_process 模塊新建子進程，從而執行 Unix 系統命令
14   //下面這段代碼實際就是把cmd這個參數傳遞的值轉化成前後沒有空格的字符串，也就是版本號
15   return require(‘child_process‘).execSync(cmd).toString().trim()
16 }
17 
18 var versionRequirements = [
19   {
20     name: ‘node‘, // node版本的信息
21     currentVersion: semver.clean(process.version), // 使用semver插件吧版本信息轉化成規定格式，也就是 ‘  =v1.2.3  ‘ -> ‘1.2.3‘ 這種功能
22     versionRequirement: packageConfig.engines.node // 這是規定的pakage.json中engines選項的node版本信息 "node":">= 4.0.0"
23   },
24 ]
25 
26 if (shell.which(‘npm‘)) {
27   versionRequirements.push({
28     name: ‘npm‘,
29     currentVersion: exec(‘npm --version‘), // 自動調用npm --version命令，並且把參數返回給exec函數，從而獲取純凈的版本號
30     versionRequirement: packageConfig.engines.npm // 這是規定的pakage.json中engines選項的node版本信息 "npm": ">= 3.0.0"
31   })
32 }
33 
34 module.exports = function () {
35   var warnings = []
36   for (var i = 0; i < versionRequirements.length; i++) {
37     var mod = versionRequirements[i]
38     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
39         //上面這個判斷就是如果版本號不符合package.json文件中指定的版本號，就執行下面的代碼
40       warnings.push(mod.name + ‘: ‘ +
41         chalk.red(mod.currentVersion) + ‘ should be ‘ +
42         chalk.green(mod.versionRequirement)
43         // 大致意思就是 把當前版本號用紅色字體 符合要求的版本號用綠色字體 給用戶提示具體合適的版本
44       )
45     }
46   }
47 
48   if (warnings.length) {
49     console.log(‘‘)
50     console.log(chalk.yellow(‘To use this template, you must update following to modules:‘))
51     console.log()
52     for (var i = 0; i < warnings.length; i++) {
53       var warning = warnings[i]
54       console.log(‘  ‘ + warning)
55     }
56     console.log()
57     process.exit(1)
58     // 提示用戶更新版本，具體不解釋了，應該能看懂
59   }
60 }

vue - 前置工作 - 目錄功能介紹