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

Question

故事

我正在开发 AWS Lambda 函数并使用webpack.

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

为什么？

因为我使用 AWS Lambda 仪表板传递环境变量。

网络包配置

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')
  }
}

题

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

Answer 1

设置optimization.nodeEnv​false

从：

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

优化.nodeEnv

布尔值=假字符串

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

Answer 2

modeWebpack 配置中的选项可以替换process.env.NODE_ENV：

发展

在 DefinePlugin 上设置 process.env.NODE_ENV 以重视开发。启用 NamedChunksPlugin 和 NamedModulesPlugin。

生产

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

没有任何

选择退出任何默认优化选项

webpack -pCLI 选项也是如此。

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

对于除 之外没有环境变量的配置NODE_ENV，这个答案可能是合适的。

这适用于具有类似于问题中提供的自定义配置的 Webpack 4。对于其他 Webpack 版本或提供自己的 Webpack 配置的工具（例如 Vue CLI 和 Create React App），这可能有所不同。