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

【问题标题】：How to forbid replacing process.env variables during compilation in webpack?如何在 webpack 编译期间禁止替换 process.env 变量？
【发布时间】：2019-05-17 00:35:48
【问题描述】：

故事

我正在开发 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 变量的行为？如果是请帮我实现这个效果。

【问题讨论】：

我意识到这对你没有帮助（而且我迟到了一年），但是在我的配置中添加 target: 'node' 为我解决了这个问题，所以更奇怪的是你的不起作用.
在 prod 模式下，它对我不起作用
optimization.nodeEnv 设置为 false 应该可以工作

标签： node.js typescript webpack aws-lambda webpack-4

【解决方案1】：

将optimization.nodeEnv 设置为false

发件人：

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

优化.nodeEnv

boolean = 假字符串

告诉 webpack 将 process.env.NODE_ENV 设置为给定的字符串值。 optimization.nodeEnv > 除非设置为 false，否则使用 DefinePlugin。 optimization.nodeEnv 如果设置默认为模式，> 否则回退到“生产”。

【讨论】：

【解决方案2】：

虽然将optimization.nodeEnv 设置为false 适用于NODE_ENV 变量，但它不适用于所有环境变量，并且不会阻止process.env 在编译后的代码。

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

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

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

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

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

ENVIRONMENT.DATABASE_URL

以上编译为process.env.DATABASE_URL。

【讨论】：

【解决方案3】：

Webpack 配置中的mode option 可以替换process.env.NODE_ENV：

发展

将 DefinePlugin 上的 process.env.NODE_ENV 设置为价值开发。启用 NamedChunksPlugin 和 NamedModulesPlugin。

生产

将 DefinePlugin 上的 process.env.NODE_ENV 设置为值生产。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin，NoEmitOnErrorsPlugin， OccurrenceOrderPlugin、SideEffectsFlagPlugin 和 TerserPlugin。

没有

退出任何默认优化选项

webpack -p CLI option 也是如此。

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

【讨论】：

【解决方案4】：

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

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

【讨论】：