接着上一节来,我们要解决上一节所遇到的一个问题。
上一节提到,要让生产环境使用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
文件中:
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
中的代码更改如下:
...var isProd = process.env.NODE_ENV === 'production'; // true or falsevar cssDev = ['style-loader', 'css-loader', 'sass-loader'];var cssProd = ExtractTextPlugin.extract({fallback: 'style-loader',//resolve-url-loader may be chained before sass-loader if necessaryuse: ['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
命令了,再也不用临时关掉一些插件了。
这节就说这么多。