webpack 設定筆記 ✧ 設定 NODE_ENV 環境變數

markdown ## process.env 為 node.js 的原生對象，然只在 MAC 中可以順利運行 ## process.env.NODE_ENV 指在 process.env 對象下，新增一個名為「NODE_ENV」的對象 ## cross-env 在 Windows 環境下，並沒有向 MAC 一樣有內建 process.env 的對象，因此需要安裝此套件，以便 Windows 的使用者可以使用相關對象參數。 ``` // 安裝方式 in CMD npm i cross-env -D ``` ## scripts 設定方式 檔案名稱：package.json ``` "scripts": { "start": "cross-env NODE_ENV=development webpack", "deploy": "cross-env NODE_ENV=production webpack" } ``` ## webpack mode 設定方式 檔案名稱：webpack.config.js ``` module.exports = { context: path.resolve(__dirname, './src'), entry: './index.js', mode: process.env.NODE_ENV, output: { path: path.resolve(__dirname, './dist'), filename: 'index.min.js' } }; ``` ## 使用範圍 除了可以直接在 webpack.config.js 直接指定 mode 狀態，也在不同模式下對函式進行判斷。如： 編成過程中常使用的 console.log() ``` function log(e) { if (process.env.NODE_ENV === 'development') { console.log(e); } } ``` 改寫之後，在佈署 (production) 模式下不會有 console 輸出。