├─build
│   ├─build.js
│   ├─check-versions.js
│   ├─dev-client.js
│   ├─dev-server.js
│   ├─utils.js
│   ├─vue-loader.conf.js
│   ├─webpack.base.conf.js
│   ├─webpack.dev.conf.js
│   ├─webpack.prod.conf.js
│   └─webpack.test.conf.js
├─config
│   ├─dev.env.js
│   ├─index.js
│   ├─prod.env.js
│   └─test.env.js
├─...
└─package.json
以上是關於bulid與run的所有文件

指令分析

package.json裡面

"dev": "node build/dev-server.js",

"build": "node build/build.js",

意思：運行”npm run dev”的時候執行的是build/dev-server.js文件，

運行”npm run build”的時候執行的是build/build.js文件。

build文件夾分析

build/dev-server.js

npm run dev 執行的文件build/dev-server.js文件，執行了：

檢查node和npm的版本
引入相關插件和配置
創建express伺服器和webpack編譯器
配置開發中間件（webpack-dev-middleware）和熱重載中間件（webpack-hot-middleware）
掛載代理服務和中間件
配置靜態資源
啟動伺服器監聽特定埠（8080）
自動打開瀏覽器並打開特定網址（localhost:8080）

說明： express伺服器提供靜態文件服務，不過它還使用了http-proxy-middleware，一個http請求代理的中間件。前端開發過程中需要使用到後臺的API的話，可以通過配置proxyTable來將相應的後臺請求代理到專用的API伺服器。

build/webpack.base.conf.js

dev-server依賴的webpack配置是webpack.dev.conf.js文件，

測試環境下使用的是webpack.prod.conf.js

webpack.dev.conf.js中又引用了webpack.base.conf.js

webpack.base.conf.js主要完成了下麵這些事情：

1. 配置webpack編譯入口
2. 配置webpack輸出路徑和命名規則
3. 配置模塊resolve規則
4. 配置不同類型模塊的處理規則

這個配置裡面只配置了.js、.vue、圖片、字體等幾類文件的處理規則，如果需要處理其他文件可以在module.rules裡面配置。

build/webpack.dev.conf.js

在webpack.base.conf的基礎上增加完善了開發環境下麵的配置，主要包括下麵幾件事情：

將hot-reload相關的代碼添加到entry chunks
合併基礎的webpack配置
使用styleLoaders
配置Source Maps
配置webpack插件

build/check-versions.js和build/dev-client.js

最後是build文件夾下麵兩個比較簡單的文件，

dev-client.js似乎沒有使用到，代碼也比較簡單，這裡不多講。

check-version.js完成對node和npm的版本檢測

build/utils.js和build/vue-loader.conf.js

webpack配置文件中使用到了utils.js和vue-loader.conf.js這兩個文件，utils主要完成下麵3件事：

配置靜態資源路徑
生成cssLoaders用於載入.vue文件中的樣式
生成styleLoaders用於載入不在.vue文件中的單獨存在的樣式文件

vue-loader.conf則只配置了css載入器以及編譯css之後自動添加首碼。

build/build.js

構建環境下的配置，

build.js主要完成下麵幾件事：

loading動畫
刪除創建目標文件夾
webpack編譯
輸出信息

build/webpack.prod.conf.js

構建的時候用到的webpack配置來自webpack.prod.conf.js，該配置同樣是在webpack.base.conf基礎上的進一步完善。主要完成下麵幾件事情：

合併基礎的webpack配置
使用styleLoaders
配置webpack的輸出
配置webpack插件
gzip模式下的webpack插件配置
webpack-bundle分析
說明： webpack插件裡面多了醜化壓縮代碼以及抽離css文件等插件。

config文件夾分析

config/index.js

config文件夾下最主要的文件就是index.js了，

在這裡面描述了開發和構建兩種環境下的配置，前面的build文件夾下也有不少文件引用了index.js裡面的配置。

config/dev.env.js、config/prod.env.js和config/test.env.js

這三個文件就簡單設置了環境變數而已，沒什麼特別的。

這是webpack的基本入門，webpack還有很多插件，還需要去探索

後面寫這幾個文件的源碼解釋。