javascript - Webpack 没有给环境变量赋值

Question

我想将我的 url 设为私有(private)。

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

我该如何解决这个问题？

Answer 1

我可以分享适合我的方法。我将所有环境变量移至 config.js 并在 package.json 中设置我当前的环境(本地或 prod)，我可以使用 npm run local 或 npm run prod

包.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"
  }
}

配置.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文件