如何在 Webpack 5 中访问 process.env.VAR？

问题描述

我以前从未使用过 Webpack，我正在开发一个只有普通 JS 和 HTML 的项目。我在访问我在 .env 中设置的值时遇到问题。这是我的配置。

const path = require("path");
const dotenv = require('dotenv');

var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = () => {

  env = dotenv.config().parsed;
  
  const envKeys = Object.keys(env).reduce((prev,next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  },{});
  
  return {
    entry: {
      main: './src/index.js'
    },output: {
      path: path.join(__dirname,'../build'),filename: '[name].bundle.js'  
    },mode: 'development',devServer: {
      contentBase: "./src/",publicPath: "./src/",compress: true,port: 9000,overlay: true,disableHostCheck: true
    },devtool: 'inline-source-map',resolve: {
      alias: {
          process: "process/browser"
      }},module: {
      rules: [
        {
          test: /\.js$/,exclude: /node_modules/,use: {
            loader: 'babel-loader'
          }
        },{
          test: /\.css$/,use: [
            'style-loader','css-loader'
          ]
        },{
          test: /\.(png|svg|jpe?g|gif)$/,use: [
            {
              loader: 'file-loader',options: {
                name: '[name].[ext]',outputPath: 'assets/'
              }
            }
          ]
        },{
          test: /\.html$/,use: {
            loader: 'html-loader',options: {
              //attributes: ['img:src',':data-src'],minimize: true
            }
          }
        }
      ]
    },plugins: [
      new webpack.ProvidePlugin({
        process: 'process/browser',}),new Dotenv(),new webpack.DefinePlugin(envKeys),new HtmlWebpackPlugin({
        template: './src/index.html',filename: 'index.html'
      }),]
  }
};

如您所见，我正在使用 dotEnv、definePlugin，甚至 dotEnv-webpack 插件。不幸的是，这些解决方案似乎都不允许我访问 process.env.originURL。

originURL=https://localhost:3000

我没有在我的 javascript 文件 index.js 中导入或要求任何内容。我假设这应该可行，但控制台告诉我进程未定义。

console.log(process.env.originURL);

如何在我的 index.js 中访问 process.env.originURL？

解决方法

它应该可以工作。也许你可以试试这个版本：

 new Dotenv({ systemvars: true })

如果它仍然不起作用，请显示您的 package.json 以及您的 .env 文件（当然是随机值）。 .env 是您应用的根目录吗？