1 var path = require('path')
 2 
 3 module.exports = {
 4   build: { // production 環境
 5     env: require('./prod.env'), // 使用 config/prod.env.js 中定義的編譯環境
 6     index: path.resolve(__dirname, '../dist/index.html'), // 編譯輸入的 index.html 文件
 7     assetsRoot: path.resolve(__dirname, '../dist'), // 編譯輸出的靜態資源路徑
 8     assetsSubDirectory: 'static', // 編譯輸出的二級目錄
 9     assetsPublicPath: '/', // 編譯發布的根目錄，可配置為資源服務器域名或 CDN 域名
10     productionSourceMap: true, // 是否開啟 cssSourceMap
11     // Gzip off by default as many popular static hosts such as
12     // Surge or Netlify already gzip all static assets for you.
13     // Before setting to `true`, make sure to:
14     // npm install --save-dev compression-webpack-plugin
15     productionGzip: false, // 是否開啟 gzip
16     productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 壓縮的文件擴展名
17   },
18   dev: { // dev 環境
19     env: require('./dev.env'), // 使用 config/dev.env.js 中定義的編譯環境
20     port: 8080, // 運行測試頁面的端口
21     assetsSubDirectory: 'static', // 編譯輸出的二級目錄
22     assetsPublicPath: '/', // 編譯發布的根目錄，可配置為資源服務器域名或 CDN 域名
23     proxyTable: {}, // 需要 proxyTable 代理的接口（可跨域）
24     // CSS Sourcemaps off by default because relative paths are "buggy"
25     // with this option, according to the CSS-Loader README
26     // (https://github.com/webpack/css-loader#sourcemaps)
27     // In our experience, they generally work as expected,
28     // just be aware of this issue when enabling this option.
29     cssSourceMap: false // 是否開啟 cssSourceMap
30   }
31 }

 1 // https://github.com/shelljs/shelljs
 2 require('./check-versions')() // 檢查 Node 和 npm 版本
 3 require('shelljs/global')  // 使用了 shelljs 插件，可以讓我們在 node 環境的 js 中使用 shell
 4 env.NODE_ENV = 'production'
 5 
 6 var path = require('path') 
 7 var config = require('../config') // 加載 config.js
 8 var ora = require('ora') // 一個很好看的 loading 插件
 9 var webpack = require('webpack')  // 加載 webpack
10 var webpackConfig = require('./webpack.prod.conf')  // 加載 webpack.prod.conf
11 
12 console.log( //  輸出提示信息 ～ 提示用戶請在 http 服務下查看本頁面，否則為空白頁
13   '  Tip:\n' +
14   '  Built files are meant to be served over an HTTP server.\n' +
15   '  Opening index.html over file:// won\'t work.\n'
16 )
17 
18 var spinner = ora('building for production...')  // 使用 ora 打印出 loading + log
19 spinner.start()  // 開始 loading 動畫
20 
21 /* 拼接編譯輸出文件路徑 */
22 var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
23 rm('-rf', assetsPath) /* 刪除這個文件夾 （遞歸刪除） */
24 mkdir('-p', assetsPath) /* 創建此文件夾 */ 
25 cp('-R', 'static/*', assetsPath) /* 復制 static 文件夾到我們的編譯輸出目錄 */
26 
27 webpack(webpackConfig, function (err, stats) {  //  開始 webpack 的編譯
28     // 編譯成功的回調函數
29   spinner.stop()
30   if (err) throw err
31   process.stdout.write(stats.toString({
32     colors: true,
33     modules: false,
34     children: false,
35     chunks: false,
36     chunkModules: false
37   }) + '\n')
38 })