Webpack没有为环境变量赋值

时间:2017-04-25 23:51:15

标签: javascript webpack environment-variables config

我想将我的网址设为私有。

在我的Webpack.config.js中,我声明了一些环境变量,并且需要dotenv-webpack

plugins: [
  new webpack.EnvironmentPlugin([
    'NODE_ENV',
    'MY_URL'
  ]),
  new Dotenv({
    path: './.env', // Path to .env file (this is the default)
    safe: false // load .env.example (defaults to "false" which does not use dotenv-safe)
  })
]

然后我创建了.env并添加了MY_URL=http://my.secret.url

但是当我记录process.env.MY_URL时,undefined

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:2)

我可以分享对我有用的方式。我将所有环境变量移动到config.js并在package.json中设置我当前的环境(本地或prod),我可以使用npm run localnpm run prod

的package.json

{
  "name": "workshop_butler_widget",
  "version": "1.0.0",
  "description": "Workshopbutler widget",
  "author": "http://workshopbutler.com",
  "license": "ISC",
  "devDependencies": {
    ....
  },
  "scripts": {
    "local": "NODE_ENV=local webpack-dev-server",
    "prod": "NODE_ENV=prod webpack-dev-server"
  }
}

config.js

module.exports = {
  local: {
    url: 'http://local'
  },
  prod: {
    url: 'http://prod'
  }
} 

webpack.config.js

const configs  = require('./config.js');
const env = process.env.NODE_ENV;
const current = (env === "local")? configs.local: configs.prod; 


...

plugins: [
  new webpack.DefinePlugin({
   'NODE_ENV': JSON.stringify(env),
   'MY_URL': JSON.stringify(current.url)
  })
]

或者您可以通过'fs'npm包直接在webpack.config.js中读取.env文件