node.jstypescriptwebpackaws-lambdawebpack-4

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


Story

I'm developing the AWS Lambda functions and compile the code using webpack.

I've read some of the articles and it seems that the process.env variables are auto replaced during compilation. Although it's cool I want to forbid this behaviour.

Why?

Because I'm passing environment variables using AWS Lambda dashboard.

Webpack configuration

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

Question

Is it possible to forbid the behaviour of replacing the process.env variables during webpack compilation? If yes please help me to achieve this effect.


Solution

  • mode option in Webpack configuration enables the replacement of 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

    So does webpack -p CLI option.

    In case, the effect of DefinePlugin on process.env.NODE_ENV is not desirable, listed plugins should be applied without DefinePlugin, as the documentation shows for production and development modes.

    For the configuration with no environment variables except NODE_ENV, this answer may be suitable.

    This is applicable to Webpack 4 with custom configuration similar to the one provided in the question. This may be different for other Webpack versions or the tools that provide their own Webpack configuration like Vue CLI and Create React App.