13. 生产环境 vs 开发环境
最后更新于：2022-04-02 01:40:21
# 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` 命令了，再也不用临时关掉一些插件了。
这节就说这么多。
';