測試的東西先不看,直接看”dev”和”build”。運(yùn)行”npm run dev”的時(shí)候執(zhí)行的是build/dev-server.js文件,運(yùn)行”npm run build”的時(shí)候執(zhí)行的是build/build.js文件,我們可以從這兩個(gè)文件開始進(jìn)行代碼閱讀分析。
三、build文件夾分析
build/dev-server.js
首先來看執(zhí)行”npm run dev”時(shí)候最先執(zhí)行的build/dev-server.js文件。該文件主要完成下面幾件事情:
檢查node和npm的版本
引入相關(guān)插件和配置
創(chuàng)建express服務(wù)器和webpack編譯器
配置開發(fā)中間件(webpack-dev-middleware)和熱重載中間件(webpack-hot-middleware)
掛載代理服務(wù)和中間件
配置靜態(tài)資源
啟動(dòng)服務(wù)器監(jiān)聽特定端口(8080)
自動(dòng)打開瀏覽器并打開特定網(wǎng)址(localhost:8080)
說明: express服務(wù)器提供靜態(tài)文件服務(wù),不過它還使用了http-proxy-middleware,一個(gè)http請求代理的中間件。前端開發(fā)過程中需要使用到后臺的API的話,可以通過配置proxyTable來將相應(yīng)的后臺請求代理到專用的API服務(wù)器。
詳情請看代碼注釋: