webpack 運行邏輯
main.js 是主要的進入點(entry)，webpack 會監控 main.js , 當main.js 有更動時 webpack 就自動編譯，編譯成 css,js 等遊覽器看得懂的語言。
由於 main.js 只是一個 js 檔案，無法看得懂 .vue 或者 .scss 檔，因此 webpack 有提供 loader 工具，來幫助 main.js 理解輸出這些檔案。
webpack 腳本檔案介紹
在 build 資料夾裡面有 webpack 腳本檔案，分別是:
- webpack.base.conf.js
- 主要核心
- webpack.dev.conf.js
- 給我們開發中預覽畫面用的
- webpack.prod.conf.js
- entry 進入點和 output 輸出點
- loaer 的寫在這些 module
- test: /.(png|jpe?g|gif|svg)(?.)?$/,test: /.(png|jpe?g|gif|svg)(?.)?$/ 這個 loader 會將圖檔小於 10 KB 的圖檔用 base64 方式編碼呈現
- test: /.(png|jpe?g|gif|svg)(?.)?$/,test: /.(png|jpe?g|gif|svg)(?.)?$/ 這個 loader 會將圖檔小於 10 KB 的圖檔用 base64 方式編碼呈現
- resolve
- extensions: [‘.js’, ‘.vue’, ‘.json’],這是讓你可以省略副檔名的
- alias:裡面是放各種路徑的縮寫，像是 src 就可以用 @ 來替代
config 環境變數
在 webpack.base.conf.js 的 output 裡面你會看到它輸出的路徑 path: config.build.assetsRoot,裡面的 build 就代表 build 資料夾，裡面檔案如下：
- index.js 代表整個運行環境，比如設定 port 口
- dev.env.js 設定開發時的環境變數
- prod.env.js 設定發布時的環境變數
- 開發時和發布時環境變數可能不太一樣(ajax路徑不相同)
自定義環境變數
1.我們在 dev.env.js 的 module.exports 底下新增一個環境變數
記得除了加上’’外還要加””，不然會出錯，還有記得改完後要重啟環境，因為我們新增的是環境變數。
1 | HTTP_PATH: '"http://localhost/"' |
2.最後我們來到 scr/components 裡面的 App.vue 檔，移到最下面 js 部分，在 return 資料的部分，我們輸出兩個環境變數
1 | msg: process.env.NODE_ENV, |
3.使用 npm run dev重啟環境，環境變數加入成功