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

Question

我知道网上有很多相关的文档和问题，但似乎没有什么能够解决我的问题。

我有一个包含webpack的简单的原生JS项目。

这是我的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)。这是在浏览器中运行而不是在Node服务器中运行。那么缺少什么？如何使用环境变量构建代码？

Uncaught (in promise) ReferenceError: process is not defined

- Pablo

---

@jabaa 好的，但是当 webpack 构建它时，它应该被替换了，对吧？我的意思是，React 或 Angular 都在浏览器上运行，但它们可以在打包之前处理它们的代码中的 process.env。 - Pablo

我以为new webpack.EnvironmentPlugin会做到那一点，如果您知道如何实现，请提供链接 :) - Pablo

现在我得到了 Uncaught (in promise) ReferenceError: CUSTOM_PATH is not defined。 - Pablo

DefinePlugin和EnvironmentPlugin不会解析您的.env文件，我怀疑，如果您直接传递环境变量，它将起作用 "start": "CUSTOM_PATH=https://test.s3.. export $(xargs..。 - Yevhen Horbunkov

@YevgenGorbunkov 我也尝试过那个，但是webpack返回了一个错误：CUSTOM_PATH环境变量未定义 - Pablo

Answer 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，即使它已经是一个字符串，也无法正常工作。

- Pablo

---

DefinePlugin 对我来说很有效。到目前为止，这是我找到的唯一方法！ - undefined