14、定义环境变量

定义环境变量

当我们在配置的时候，需要区分所配置的属性参数是属于生产环境还是开发环境。每个环境对应的配置都不同。这就是环境变量最重要的意义。

当然，要实现上面所说的效果，就需要用到webpack内置插件webpack.DefinePlugin

环境变量配置

//webpack.config.js
let webpack = require('webpack');
plugins:[
    new webpack.DefinePlugin({
        //DEV:'dev'//这样独到的DEV是dev，但是dev是变量，而不是字符串，如果要是字符串，那就应该写成“’dev‘”
		//上面的写法比较恶心，要用两个引号，那么可以换下面这种方式
		DEV:JSON.stringify('dev'),//解析出来的就是“’dev‘”
		EXPRESSION:'1+1',//这样解析出来就是2，而不是'1+1'，如果要解析出来是'1+1',那就应该写成JSON.stringify('1+1')
		FLAG：'true',//解析出来就是true
		//注意，这个大写的变量名称，是随你定义的
    })
]

环境变量插件内的配置说明

1. 类似DEV，EXPRESSION,FLAG等变量名称均大写，但是是自己定义的，并不是固定的。
2. 如果变量的值只有一个引号，那么就会被解析成不带引号的，比如’1+1’解析成2，'true’解析成true，'dev’解析成变量dev
3. 要解析成对应的字符串，那么就可以使用以下两种方法
   • 在’dev’外再加个引号，即"‘dev’"
   • 使用JSON.stringify(‘dev’) 建议使用这一种