javascript - 同构 JS 应用程序中的环境变量 : Webpack find & replace?

Question

我正在使用 webpack 捆绑同构 JS 应用程序 (based on this example)，以便浏览器运行与服务器相同的代码。一切都运行顺利，除了我有一个 config.js，其中一些设置是从服务器上的环境变量中提取的:

module.exports = {
  servers:
    auth: process.env.AUTH_SERVER_URL,
    content: process.env.CONTENT_SERVER_URL
  }
}

在服务器上这很好，但是当 webpack 为客户端呈现时 process 是空的，这不起作用。

我希望有一种“查找和替换”的 webpack 插件可以单独用该文件中的内容替换它们？

"…config.js content…".replace(/process\.env\.([a-z0-9_]+)/, function(match, varName) {
  return process.env[varName];
})

Answer 1

请注意，按照接受的答案中的建议使用 DefinePlugin 可能是一项危险的操作，因为它会完全暴露 process.env。正如 Tobias 在上面评论的那样，实际上有一个插件 EnvironmentPlugin 通过添加白名单功能在内部使用 DefinePlugin 来完成此操作。

在你的 webpack.config.js 中:

{
  plugins: [
    new webpack.EnvironmentPlugin([
      'NODE_ENV',
      'WHITELISTED_ENVIRONMENT_VARIABLE'
    ])
  ]
}