webpack中配置环境变量

在项目中我们经常遇到这样的需求，在不同环境下读取不同的配置信息。例如在qa环境读取qa的数据库，在生产环境读取生产的数据库。那在webpack怎么配置这些信息呢？我们可以借助webpack中的DefinePlugin

webpack代码：

webpack(config, { dev }) {

  config.plugins.push(

  new webpack.DefinePlugin({

   __DEV_ENV__: JSON.stringify(JSON.parse(process.env.DEV_ENV|| 'production'))

  })

);

在这段代码中我们读取了node里面的环境变量dev，在webpack的中把他声明为__DEV__

package.json代码：

{

  "scripts": {

     "dev": "cross-env DEV_ENV=qa,

  },

  "devDependencies": {

     "cross-env": "^5.1.6",

   },

}

我在package.json中加入了cross-env依赖，可以让package.json中的脚本同时运行在linux和windows上

js代码

if (__DEV_ENV__) {

  console.log('It's dev')

}