React Webpack proces.env.PUBLIC_URL 未定义

Question

在我的 React 应用程序中，我在 src/index.js 中为 process.env 添加了控制台，如下所示；

proces.env.PUBLIC_URL // undefined
proces.env.NODE_ENV // "development"

我不确定为什么 proces.env.PUBLIC_URL 未定义。我需要在我的应用程序中检查任何具体内容。我有下面的 webpack 配置。

配置/webpack.dev.js

const merge = require('webpack-merge');
const path = require('path');
const webpack = require('webpack');

const common = require('./webpack.common');
const srcDirectory = path.resolve(__dirname, '../src');

module.exports = merge(common, {
  entry: {
    main: ['react-hot-loader/patch', path.join(srcDirectory, 'index.js')]
  },

  resolve: {
    alias: {
     
    }
  },

  output: {
    filename: '[name].bundle.js'
  },

  mode: 'development',

  devtool: 'eval-source-map',

  module: {
    rules: [
      {
        test: /\.(js|.ts|tsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
        
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
          'style-loader',
          'css-loader',
          'resolve-url-loader',
          { loader: 'sass-loader', options: { sourceMap: true } }
        ]
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },

  devServer: {
    contentBase: 'src',
    hot: true,
    port: 3000,
    historyApiFallback: {
      disableDotRule: true
    },
    stats: 'minimal',
    overlay: true,
    proxy: {
      '/api/**': {
        target: {
          port: 8080
        },
        secure: false
      },
      '/actuator/**': {
        target: {
          port: 8080
        },
        secure: false
      }
    }
  },

  plugins: [new webpack.HotModuleReplacementPlugin()]
});

下面还有 config/webpack.common.js

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const srcDirectory = path.resolve(__dirname, '../src');
const srcDirectory1 = path.resolve(__dirname, '../src/public');
const distDirectory = path.resolve(__dirname, '../dist');

module.exports = {
  entry: {
    main: ['whatwg-fetch',  'raf/polyfill']
  },

  resolve: {
    modules: [srcDirectory, 'node_modules'],
    extensions: ['.ts', '.tsx', '.js', '.json', '.html', '.scss', '.css']
  },

  output: {
    path: distDirectory,
    publicPath: '/'
  },

  module: {
    rules: [
      {
        test: /\.(js|.ts|tsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
         test: /\.txt$/, 
         exclude: /node_modules/,
         use: 'raw-loader' 
      },
     
      
      {
        test: /\.(png|jpg|jpeg|svg|gif|woff|woff2|ttf|eot|ico)(\?v=\d+\.\d+\.\d+)?$/,
        use: 'file-loader'
      }
    ]
  },

  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: path.join(srcDirectory, 'images'), to: 'images' }
      ]
    }),
    new HtmlWebpackPlugin({ template: path.join(srcDirectory, 'index.html') })
  ]
};

Answer 1

你需要使用 webpack EnvironmentPlugin。

plugins: [
  // ...
  new webpack.EnvironmentPlugin(['NODE_ENV', 'DEBUG']),
]