Question

Webpack＆＃39; DefinePlugin没有通过环境变量。我正在使用Webpack v2.2.1

我的Webpack plugins阻止如下：

plugins: [
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify("development"),
    'process.env.API_URL': JSON.stringify("test")
  }),
  new webpack.optimize.OccurrenceOrderPlugin(),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoEmitOnErrorsPlugin()
 ]

server.js：

console.log('env', process.env.NODE_ENV) // undefined
console.log('url', process.env.API_URL); // undefined

.babelrc配置：

{"presets": ["es2015", "stage-0", "react"]}

我已经开启了babel预设，将Webpack还原为2.0.0，并且真的不知道是什么原因导致这些变量无法复制。如果我需要提供任何其他信息或代码，请使用lmk。：）

Answer 1

希望这对那里的人有用。

Webpack创建静态包文件，因此在webpack完成它的时候必须有环境变量。

基于.babelrc文件，我可以看到它是与webpack捆绑的反应应用程序。所以你想要做的是将dotenv安装为依赖npm install --save dotenv

在webpack.config.js文件中，您需要执行以下操作：

    //require dotenv and optionally pass path/to/.env
    const DotEnv = require('dotenv').config({path: __dirname + '/.env'}),
          webpack = require('webpack'),

   //Then define a new webpack plugin which reads the .env variables at bundle time
          dotEnv = new webpack.DefinePlugin({
              "process.env": {
              'BASE_URL': JSON.stringify(process.env.BASE_URL),
              'PORT': JSON.stringify(process.env.PORT)
             }
        });

    // Then add the newly defined plugin into the plugin section of the exported
    //config object
    const config = {
        entry: `${SRC_DIR}/path/to/index.js`,
        output: {
            path: `${DIST_DIR}/app`,
            filename: 'bundle.js',
            publicPath: '/app/'
        },
        module: {
            loaders: [
                {
                    test: /\.js?$/,
                    include: SRC_DIR,
                    loader: "babel-loader",
                    exclude: /node_modules/,
                    query: {
                        presets: ["react", "es2015", "stage-3"]
                    }
                }
            ]
        },
        plugins: [
            dotEnv
        ]
    };
    module.exports = config;

所以发生的事情是在捆绑时，环境变量全局存储到新定义的webpack插件中创建的process.env对象中，这使我们的变量可以通过process.env.[VARIABLE_NAME]

访问我们的代码库中的任何位置

P.S：在云服务器（如heroku）上，确保在部署代码之前设置所有需要的环境变量。如果在代码部署后进行更改，则需要重新部署webpack以更新存储的变量。这种方法适用于反应和角度。我相信它应该适用于所有webpack构建。编辑：另外，我们必须对我们传入webpack插件的环境变量执行JSON.stringify()。

Webpack DefinePlugin不将环境变量传递给节点服务器

1 个答案: