# 13. 生產環境 vs 開發環境 接著[上一節](https://www.rails365.net/articles/webpack-3-ling-ji-chu-ru-men-jiao-cheng-12-ru-he-shi-yong-mo-kuai-re-ti-huan-hmr-lai-chu-li-css)來，我們要解決上一節所遇到的一個問題。 上一節提到，要讓生產環境使用 `extract-text-webpack-plugin` 這個插件，而開發環境不使用，如何做到呢？ 其實原理很簡單，只要能區分出哪個是開發環境，哪個是生產環境就可以，只要判斷是生產環境的時候就用，不是的話，就不用，就可以了。 我們來試一下。 ## 1. 增加環境變量 首先來看一下之前的開發環境和生產環境分別使用的編譯命令： **webpack.config.js** ``` "scripts": { "dev": "webpack-dev-server", "prod": "webpack -p" }, ``` 分別是開發環境使用的 `npm run dev` 命令和生產環境使用的 `npm run prod` 命令。 我們把它改成下面這樣： ``` "scripts": { "dev": "webpack-dev-server", "prod": "NODE_ENV=production webpack -p" }, ``` 開發環境的部分不變，生產環境的加了一個環境變量： ``` NODE_ENV=production ``` 很簡單，`NODE_ENV` 是變量名，而 `production` 是 `NODE_ENV` 是這個變量的值，這些都不是固定的，你可以改成你想要的任意內容，只要能引用到就行了。 那么我們如何來使用這個變量呢？ ## 2. 使用環境變量 要引用我們之前創建的環境變量，也蠻簡單的。 在 `webpack.config.js` 文件中： ``` javascript var isProd = process.env.NODE_ENV === 'production'; // true or false ``` `process.env.NODE_ENV` 就能得到之前設置的變量，如果運行的是 `npm run prod`，那么 `process.env.NODE_ENV` 的值就是 `production`，那 `isProd` 就是 true，如果運行的是 `npm run dev`，`isProd` 就是 false，因為 `npm run dev` 沒有設置這個 `NODE_ENV` 這個環境變量嘛。 上一節，我們有類似下面這樣的兩段關于 `extract-text-webpack-plugin` 這個插件的代碼。 ``` new ExtractTextPlugin({ filename: 'style.css', disable: false }), test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] ``` 我們把 `webpack.config.js` 中的代碼更改如下： ``` javascript ... var isProd = process.env.NODE_ENV === 'production'; // true or false var cssDev = ['style-loader', 'css-loader', 'sass-loader']; var cssProd = ExtractTextPlugin.extract({ fallback: 'style-loader', //resolve-url-loader may be chained before sass-loader if necessary use: ['css-loader', 'sass-loader'] }) var cssConfig = isProd ? cssProd : cssDev; module.exports = { ... plugins: [ ... new ExtractTextPlugin({ filename: 'style.css', disable: !isProd }), ... ], module: { rules: [ { test: /\.scss$/, use: cssConfig }, ... ] } }; ``` 上面的代碼應該不難理解吧。 只要能區別出不同的環境，使用不同的配置內容就可以了。 現在就可以放心地使用 `npm run dev` 和 `npm run prod` 命令了，再也不用臨時關掉一些插件了。 這節就說這么多。