今早運維小哥哥跑來找我，想給我的新專案發個版，我還是按照一般流程npm run build 然後git提交，打個tag v1.0.1，運維小哥哥說你前端頁面沒寫好嘛？

emmmm….老孃早就寫好了。肯定是哪裡出了問題，我開啟一看果然有問題。

果然啥都沒有。不用著急，先看下控制檯報錯。

就說XXXNOT FOUND，極有可能是路徑問題。

閒話不多說，我先去試哈。

在config資料夾下面有個index.js，開啟裡面有個build物件，assetsPublicPath欄位，本來是'/'改成'./'，再npm run build,開啟dist下面的index.html，果然成了。看來我猜的是對的。

but 我驕傲了麼？我輕浮了麼？並沒有。回頭仔細看下原理。

指令分析

package.json檔案裡的

 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js"
  }

這兩條指令的意思：

• 執行npm run dev 的時候執行的是build/dex-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.base.conf.js，webpack.dev.conf.js中又引用了webpack.base.conf.js，webpack.base.conf.js主要完成了下面這些事情：

• 配置webpack編譯入口
• 配置webpack輸出路徑和明明規則
• 配置模組resolve規則
• 配置不同型別模組的處理規則
  這個配置裡面只配置了.js 、.vue、圖片、字型等幾類檔案的處理規則額，如果需要處理器她檔案可以在 module.rules裡面配置。

build/webpack.dev.conf.js

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

• 將hot-reload相關的程式碼新增到entry chunkd
• 合併基礎的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這兩個檔案，utils主要完成下面三件事：

• 配置靜態資源路徑
• 生成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還有很多外掛，還需要去探索。後面寫這幾個檔案的原始碼解釋。