小編花了點時間，大致弄懂npm run start如何執行專案的原理了，現在給大家分享下心得！npm run start是通過node跑js檔案，從而專案得以執行，小編通過npm run eject拿到了所有配置，然後通過解析原始碼，明白瞭如果通過webpack等讓專案dev環境下跑起來的！

    說白了很簡單，就是通過node跑入口的js檔案，然後webpack進行跑專案，下面是配置的資料夾

    env.js就是環境變數的各種配置js，path.js就是各個檔案路徑的配置js，polyfills.js是打包的時候相容低版本瀏覽器的配置js，剩下的3個webpack相關的檔案就是生產和開發環境的js，和一個webpack伺服器的配置js。

    上面不是我們今天的內容，我們今天的內容在下面的這張圖

    聰明的你一定已經猜測到了，我們今天要講的就是start.js。npm run start就是跑這個檔案的，下面我們來看幾段核心的程式碼！

    這個是用來動態宣告node各個環境的，process代表node執行過程的程序監控，你可以從中拿到所有你想要的關於程序監控的變數，進行下一步操作。

  這個代表在node程序中如果出錯，觸發丟擲error，讓碼農能夠清楚哪步出問題了。

    這部分是引入變數，聰明的你一定可以看到下面4句程式碼，require('../config/env')，const paths = require('../config/paths')，const config = require('../config/webpack.config.dev')，const createDevServerConfig = require('../config/webpackDevServer.config')。沒錯，這4句程式碼就是從剛剛的配置中獲取相應的配置。

    這段程式碼是核心，正是通過這段程式碼，我們的專案得以跑起來，通過一些npm包，具體的包的功能讀者可以自行去看，小編這裡帶大家大致過下每行程式碼代表的意思。protocol這個變數代表了請求的協議是http還是https，appName是你專案的名稱，urls代表了按照protocol等資訊我們獲得的url的開始一部分，例如http://127.0.0.1:3000，compiler代表創造一個webpack編譯，把你的程式碼編譯成瀏覽器能執行的程式碼，proxySetting，proxyConfig，serverConfig代表的是設定代理和獲得對應的服務配置，devServer代表的是把編譯的配置compiler和服務的配置serverConfig傳入，獲得的啟動服務。

    熟悉node的童鞋都知道，必須通過listen啟動埠，使用者才能看到，所以我們把上面的devServer再度啟動，我們就能看到介面了。

    以上就是npm run start的全部過程，聰明的你看完這篇文章一定會有巨大的啟發吧！