# 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` 命令了,再也不用临时关掉一些插件了。 这节就说这么多。