如何使用自定义Webpack在React上设置环境变量

Question

我的React应用不是由create-react-app运行，而是一个自定义Webpack配置。

我已经安装了dotenv /dotenv-expand/以及dotenv-webpack。

我有.env / .env.development个文件，其中包含API_URL变量。

在我的网址文件上，>

const { API_URL } = process.env
并使用此API_URL来获取数据。

但是在此文件上，当我console.log(process.env)时为空。

我也试图用[]更新webpack.config.js文件>

const Dotenv = require('dotenv-webpack');
和
new Dotenv()
在插件数组中。
但是仍然不起作用。

我也尝试过使用变量名REACT_APP_API_URL，但结果相同。

有人可以帮助我设置环境变量吗？

谢谢。

webpack.config.js

const webpack = require('webpack')
const Dotenv = require('dotenv-webpack');
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpackMerge = require('webpack-merge')

const modeConfig = env => require(`./build-utils/webpack.${env}`)(env)
const presetConfig = require('./build-utils/loadPresets')

module.exports = ({ mode, presets } = { mode: 'production', presets: [] }) => {
  console.log('mode', mode, 'presets', presets)
  return webpackMerge(
    {
      mode,
      module: {
        rules: [
          {
            test: /\.(png|jpe?g|svg)$/,
            use: {
              loader: 'file-loader',
              options: {
                name: 'assets/[name].[ext]',
              }
            },
          },
        ],
      },
      node: {
        fs: 'empty'
      },
      resolve: {
        extensions: ['.js', '.json'],
      },
      output: {
        filename: 'bundle.js',
        chunkFilename: '[name].lazy-chunk.js',
        path: path.resolve(__dirname, 'build'),
        publicPath: mode === 'development' ? '/' : './'
      },
      devServer: {
        historyApiFallback: true
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './build-utils/template.html'
        }),
        new webpack.ProgressPlugin(),
        new Dotenv()
      ]
    },
    modeConfig(mode),
    presetConfig({ mode, presets })
  )
}
我的React应用不是由create-react-app运行，而是一个自定义Webpack配置。我已经安装了dotenv / dotenv-expand /以及dotenv-webpack。我有带有API_URL变量的.env / .env.development文件...

Answer 1

如果您要访问JS文件中的env值，通常需要安装dotenv插件。

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpackMerge = require('webpack-merge')

require('dotenv').config() // may need to set path to your .env file somewhere

const modeConfig = env => require(`./build-utils/webpack.${env}`)(env)
const presetConfig = require('./build-utils/loadPresets')

module.exports = ({ mode, presets } = { mode: 'production', presets: [] }) => {
  return webpackMerge(
      ...
      plugins: [
        new HtmlWebpackPlugin({
          template: './build-utils/template.html'
        }),
        new webpack.ProgressPlugin(),
        new webpack.DefinePlugin({
           'process.env': {
               NODE_ENV: JSON.stringify(process.env.NODE_ENV),
               SOME_VALUE: JSON.stringify(process.env.SOME_VALUE),
               ...
            }
        })
      ]
    },
    ...
  )
}