同构JS应用程序中的环境变量:Webpack查找和替换？

Question

我正在使用webpack捆绑一个同构的JS应用程序(基于此示例),以便浏览器运行与服务器相同的代码.一切都运行顺利,除了我有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'
    ])
  ]
}

Answer 2

在你的webpack.config.js,使用以下preLoaders(或postLoaders),

  module: {
    preLoaders: [
      { test: /\.js$/, loader: "transform?envify" },
    ]
  }

使用的另一种方式webpack.DefinePlugin:

plugins: [
    new DefinePlugin({
      'process.env': Object.keys(process.env).reduce(function(o, k) {
        o[k] = JSON.stringify(process.env[k]);
        return o;
      }, {})
    })
]

注意:旧方法使用envify-loader已弃用:

DEPRECATED:改为使用transform-loader + envify.