如何将环境变量包含到 Webpack 5 中？答案

【问题标题】：how to include env variables into Webpack 5?如何将环境变量包含到 Webpack 5 中？
【发布时间】：2021-11-05 06:18:55
【问题描述】：

我知道网上有很多文档，还有几个与此相关的问题，但似乎没有任何效果。

我有一个简单的原生 JS 项目，与 webpack 捆绑在一起。

这是我的webpack.dev.js 文件：

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

module.exports = {
  mode: 'development',
  devtool: 'eval-source-map',
  output: {
    path: path.resolve('public'),
    filename: 'dist/bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
      {
        test: /\.svg$/,
        use: 'file-loader',
      },
    ],
  },
  plugins: [
    new webpack.EnvironmentPlugin(['CUSTOM_PATH']),
  ],
  devServer: {
    static: './public',
  },
};

这是我的.env 文件：

CUSTOM_PATH=https://test.s3.us-west-2.amazonaws.com/test/dev/

最后这是我package.json上的脚本

"start": "export $(xargs < ../.env) && webpack serve --open --config webpack.dev.js",

当我启动项目时，我得到一个错误，说process 没有定义，当我尝试做一个简单的console.log(process.env.CUSTOM_PATH)时

Uncaught (in promise) ReferenceError: process is not defined

这将在浏览器上运行，而不是在节点服务器中。

缺少什么？如何使用环境变量进行构建？

【问题讨论】：

@jabaa 好的，但是当 webpack 构建它时，它应该替换，对吗？我的意思是，react 或 angular，两者都在浏览器上运行，但它们可以在 bundle 之前处理其代码上的 process.env
我认为new webpack.EnvironmentPlugin 会这样做，如果你知道怎么做，我会很感激一个链接:)
现在我得到Uncaught (in promise) ReferenceError: CUSTOM_PATH is not defined
DefinePlugin 和 EnvironmentPlugin 不会解析你的 .env 文件，我怀疑，如果你直接传递环境变量，它会工作"start": "CUSTOM_PATH=https://test.s3.. export $(xargs..
@YevgenGorbunkov 我也试过了，但是 webpack 返回一个错误：CUSTOM_PATH environment variable is undefined

标签： javascript webpack environment-variables

【解决方案1】：

最终将我的webpack.dev.js 更新为

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

module.exports = {
  mode: 'development',
  devtool: 'eval-source-map',
  output: {
    path: path.resolve('public'),
    filename: 'dist/bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
      {
        test: /\.svg$/,
        use: 'file-loader',
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        CUSTOM_PATH: JSON.stringify(process.env.CUSTOM_PATH)
      }
    }),
  ],
  devServer: {
    static: './public',
  },
};

没有JSON.stringify 出于某种原因不起作用，即使它已经是一个字符串。

【讨论】：