WebPack 在 Visual Studio 無法正確編譯，在 Command Prompt 卻正常

在之前筆記在 Visual Studio 中使用 WebPack 來編譯 Vue.js 紀錄到如何在 Visual Studio 使用 WebPack 來編譯 Vue.js，設定上步驟並不多，使用上也相當方便，只是又踩到雷了XD 不過我在家中電腦與公司電腦都有遇到相同問題，而且公司電腦還遇到兩次一樣的狀況(應該不算是人品問題吧 >”<)：Visual Studio 的 WebPack 無法順利完成編譯，查了好久，也試著把有專案重建都無法解決問題，後來才發現在 Command Prompt 中是正常的 @@”

就來看看問題發生原因跟解決方式吧

錯誤訊息

訊息內容

C:\Users\YowkoTsai\Documents\Visual Studio 2017\Projects\TestWebpack\TestWebpack> cmd /c SET NODE_ENV=development&& webpack --color --display-error-details
Hash: d15ba0238639a7c76803
Version: webpack 3.8.1
Time: 793ms
                Asset    Size  Chunks                    Chunk Names
./Scripts/Build/dist.js  301 kB       0  [emitted]  [big]  main
[0] (webpack)/buildin/global.js 488 bytes {0} [built]
[1] ./Scripts/VueSrc/main.js 221 bytes {0} [built]
[6] ./Scripts/VueSrc/app.vue 2.74 kB {0} [built] [failed] [1 error]
    + 4 hidden modules
ERROR in ./Scripts/VueSrc/app.vue
Module build failed: SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\Users\YowkoTsai\Documents\Visual Studio 2017\Projects\TestWebpack\TestWebpack\node_modules\vue-loader\index.js:1:80)
    at Module._compile (module.js:397:26)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at loadLoader (C:\Users\YowkoTsai\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\loadLoader.js:13:17)
    at iteratePitchingLoaders (C:\Users\YowkoTsai\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at runLoaders (C:\Users\YowkoTsai\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:362:2)
    at NormalModule.doBuild (C:\Users\YowkoTsai\AppData\Roaming\npm\node_modules\webpack\lib\NormalModule.js:182:3)
    at NormalModule.build (C:\Users\YowkoTsai\AppData\Roaming\npm\node_modules\webpack\lib\NormalModule.js:275:15)
    at Compilation.buildModule (C:\Users\YowkoTsai\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:151:10)
    at factoryCallback (C:\Users\YowkoTsai\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:344:12)
    at C:\Users\YowkoTsai\AppData\Roaming\npm\node_modules\webpack\lib\NormalModuleFactory.js:241:5
    at C:\Users\YowkoTsai\AppData\Roaming\npm\node_modules\webpack\lib\NormalModuleFactory.js:94:13
    at C:\Users\YowkoTsai\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\Tapable.js:268:11
    at NormalModuleFactory.<anonymous> (C:\Users\YowkoTsai\AppData\Roaming\npm\node_modules\webpack\lib\CompatibilityPlugin.js:52:5)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (C:\Users\YowkoTsai\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\Tapable.js:272:13)
    at C:\Users\YowkoTsai\AppData\Roaming\npm\node_modules\webpack\lib\NormalModuleFactory.js:69:10
    at C:\Users\YowkoTsai\AppData\Roaming\npm\node_modules\webpack\lib\NormalModuleFactory.js:194:7
    at nextTickCallbackWith0Args (node.js:452:9)
    at process._tickCallback (node.js:381:13)
@ ./Scripts/VueSrc/main.js 2:0-28
Process terminated with code 2.

我另台電腦遇到的錯誤是 > arrow function 無法編譯的問題， error code 8，但解法相同

錯誤截圖
在 Command Prompt 卻一切正常

解決方式

將 Visual Studio 使用的 WebPack 設定與 Command Prompt 相同 –> 吃環境變數中的設定
1. Visual Studio 主選單 Tools –> Options…
2. Projects and Solutions –> Web Package Management –> External Web Tools
3. 將 $(PATH) 移至第一個位置
設定成功

心得

這個問題我每台電腦、每個 Visual Studio (我同時測試過 Visual Studio 2015 及 Visual Studio 2017 ) 都需要調整設定，我傾向認定應該是微軟 Visual Studio 團隊經過考量所做的選擇而非 bug 畢竟不同 Visual Studio 間的設定都相同，也都會出現問題 XD

讓人不解的是做這樣的設計不是很容易出現 Visual Studio 與 Command Prompt 行為不同的情況嗎，一般前端工具的使用者應該不會透過 Visual Studio ，一定直接操作 global 環境的呀，，好在靈光乍現，想到用 Command Prompt 測試才找出問題

參考資訊

Visual Studio Task Runner console throwing error

文章目錄