此 react 專案不透過 create-react-app 建立,並手寫 webpack 打包設定。
- 設定
.env
檔案中的NODE_ENV
為development
- 設定
.env
檔案中的APP_PORT
內容,可填8080
或留白讓 webpack dev server 自動安排 - 透過 Node.js 版控軟體切換至專案使用的 Node.js 版本,比如
nvm use
- 接著在終端執行以下指令
make i
make start
Node.js: lts/gallium
# 透過 nvm 切換至指定 node 版本,或自行將 nvm 替換為該機器上有安裝的 node 版控軟體
# 專案的 Node.js 版本指定於根目錄中的 .nvmrc 中
nvm use
# 在不改動 yarn.lock 的情況下安裝專案套件
make i
# 在本機伺服器運行此前端專案,埠號透過 .env 中的 APP_PORT 指定
make start
- 設定
.env
檔案中的NODE_ENV
為production
- 設定
.env
檔案中的BUILD_DESTINATION
內容 - 接著在終端執行以下指令
# 打包此專案,產出目的地根據 .env 中的 BUILD_DESTINATION 決定
make build
專案打包完畢後,可執行以下指令來建立本機伺服器,預覽打包結果。
make preview