Webpack没有为环境变量赋值答案

【问题标题】：Webpack not assigning value to environment variableWebpack没有为环境变量赋值
【发布时间】：2017-09-23 04:19:42
【问题描述】：

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

在我的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

我该如何解决这个问题？

【问题讨论】：

标签： javascript webpack environment-variables config

【解决方案1】：

我可以分享适合我的方式。我将所有环境变量移至 config.js 并在 package.json 中设置当前环境（本地或产品），我可以使用 npm run local 或 npm 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 文件

【讨论】：