如何在 webpack 编译期间禁止替换 process.env 变量？

Question

故事

我正在开发 AWS Lambda 函数并使用 webpack 编译代码。

我读过一些文章，似乎 process.env 变量在编译期间被自动替换。虽然这很酷，但我想禁止这种行为。

为什么？

因为我正在使用 AWS Lambda 控制面板传递环境变量。

Webpack 配置

const nodeExternals = require('webpack-node-externals')
const webpack = require('webpack')
const path = require('path')

module.exports = {
  target: 'node',
  entry: path.resolve(__dirname, 'index.ts'),
  externals: [nodeExternals()],
  devtool: 'inline-source-map',
  mode: 'production',
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: [{
        loader: 'ts-loader',
        options: {
          experimentalWatchApi: true,
        },
      }],
    }]
  },
  plugins: [],
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'index.js',
    libraryTarget: 'commonjs',
    path: path.resolve(__dirname, 'dist')
  }
}

问题

是否可以禁止在webpack编译期间替换process.env变量的行为？如果是，请帮我实现这个效果。

Answer 1

Webpack 配置中的

mode option 可以替换 process.env.NODE_ENV:

development

Sets process.env.NODE_ENV on DefinePlugin to value development. Enables NamedChunksPlugin and NamedModulesPlugin.

production

Sets process.env.NODE_ENV on DefinePlugin to value production. Enables FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin and TerserPlugin.

none

Opts out of any default optimization options

webpack -p CLI option也是如此。

如果 DefinePlugin 对 process.env.NODE_ENV 的影响不理想，应在没有 DefinePlugin 的情况下应用列出的插件，如 production and development 模式的文档所示。

Answer 2

我可以通过添加以下内容在 vue.config.js 中避免这种行为：

const Config = require('webpack-chain');
const config = new Config();
module.exports = {
  chainWebpack: config => {
    config.plugins.delete("define")
  },
  configureWebpack: {
  ...,
  },
  .....
}

Answer 3

将optimization.nodeEnv设置为false

发件人：

https://webpack.js.org/configuration/optimization/#optimizationnodeenv

optimization.nodeEnv

boolean = false string

Tells webpack to set process.env.NODE_ENV to a given string value. optimization.nodeEnv > uses DefinePlugin unless set to false. optimization.nodeEnv defaults to mode if set, > else falls back to 'production'.

Answer 4

虽然将 optimization.nodeEnv 设置为 false 适用于 NODE_ENV 变量，但它不适用于 all 环境变量，并且它不会阻止 process.env 在编译代码中被替换。

我在后端使用 Webpack，因此在 运行时 期间访问很重要。

由于似乎没有在编译代码中保留 process.env 的官方方法，我找到了对我有用的解决方法。

我必须定义一个新的全局变量，我称之为 ENVIRONMENT，它将在编译期间被替换为 process.env。

new webpack.DefinePlugin({
  ENVIRONMENT: 'process.env',
}),

在我的代码中，我会像访问常规对象一样访问它：

ENVIRONMENT.DATABASE_URL

以上编译为process.env.DATABASE_URL。

Answer 5

我遇到了同样的问题，webpack 在构建时替换了 process.env 变量。对于 SSR 应用程序，这不是想要的行为。

作为一种变通方法，我在我的代码中使用了类似这样的东西来欺骗 webpack：

process['e' + 'nv'].MY_VARIABLE

如何在 webpack 编译期间禁止替换 process.env 变量？

How to forbid replacing process.env variables during compilation in webpack?

node.js

typescript

webpack

aws-lambda

webpack-4