Home

Index

How to use the EnvironmentPlugin function from webpack

Find comprehensive JavaScript webpack.EnvironmentPlugin code examples handpicked from public code repositorys.

webpack.EnvironmentPlugin is a plugin that sets environment variables that can be accessed in the code during webpack build.

deployment.md?plain=1

216
217
218
219
220
221
222
223
224
},

plugins: [
  // Ignore any of our optional modules if they aren't installed. This ignores database drivers
  // that we aren't using for example.
  new EnvironmentPlugin({ WEBPACK: true }),
  new IgnorePlugin({
    checkResource: resource => {
      const baseResource = resource.split('/', resource[0] === '@' ? 2 : 1).join('/');

396

webpack.config.js

GitHub: clerkinc/javascript

34
35
36
37
38
39
40
41
42
43
  new webpack.DefinePlugin({
    __DEV__: isDevelopment(mode),
    __PKG_VERSION__: JSON.stringify(packageJSON.version),
    __PKG_NAME__: JSON.stringify(packageJSON.name),
  }),
  new webpack.EnvironmentPlugin({
    CLERK_ENV: mode,
    NODE_ENV: mode,
  }),
],

187

How does webpack.EnvironmentPlugin work?

webpack.EnvironmentPlugin is a plugin in Webpack that sets environment variables that can be accessed by the application at runtime, making it possible to conditionally execute code based on the environment. When creating a new instance of the plugin, it accepts an object of key-value pairs where each key represents an environment variable name and the value is either a string value or a function that returns the value of the variable. During the compilation process, EnvironmentPlugin will inject the environment variables into the compiled code so that they are available to be used by the application.

webpack.config.js

GitHub: yast/d-installer

49
50
51
52
53
54
55
56
57
58
development && new ReactRefreshWebpackPlugin({ overlay: false }),
// replace the "process.env.WEBPACK_SERVE" text in the source code by
// the current value of the environment variable, that variable is set to
// "true" when running the development server ("npm run server")
// https://webpack.js.org/plugins/environment-plugin/
new webpack.EnvironmentPlugin({ WEBPACK_SERVE: null }),
// similarly for a non-environment value
// https://webpack.js.org/plugins/define-plugin/
// but because ESlint runs *before* the DefinePlugin we need to
// add it as a global variable in .eslintrc.json config file

webpack.config.js

GitHub: arco-furniture/arco-furniture

43
44
45
46
47
48
49
50
51
52
  template: path.resolve(__dirname, 'src', 'index.html'),
}),
new MiniCssExtractPlugin({
  filename: '[name].[contenthash].css',
}),
new EnvironmentPlugin({
  NODE_ENV: process.env.NODE_ENV,
  API: process.env.API,
  LOCATION_KEY: process.env.LOCATION_KEY,
  GEOHELPER_KEY: process.env.GEOHELPER_KEY

Ai Example

1
2
3
4
5
6
7
8
9
10
const webpack = require("webpack");

module.exports = {
  plugins: [
    new webpack.EnvironmentPlugin({
      NODE_ENV: "development",
      DEBUG: false,
    }),
  ],
};

In this example, the EnvironmentPlugin is used to define two environment variables: NODE_ENV and DEBUG. The values for these variables are provided as key-value pairs in an object passed to the plugin constructor. These values will be available to the application code at runtime.

production.js

GitHub: frazji1012/MyCustomCrypto

36
37
38
39
40
41
42
43
44
45
},

plugins: [
  // The EnvironmentPlugin is shorthand for using the DefinePlugin on process.env keys.
  // https://webpack.js.org/plugins/environment-plugin/
  new webpack.EnvironmentPlugin(['TARGET_ENV', 'COMMIT_HASH']),

  new MiniCSSExtractPlugin({
    filename: `[name].[contenthash].css`
  }),

webpack.parts.js

GitHub: st-nhitruong/traning-unit-test

22
23
24
25
26
27
28
29
30
31
32
    return prev;
  }, {});


  return {
    plugins: [
      new Webpack.EnvironmentPlugin(Object.keys(envParsed).map(key => key)),
      new Webpack.DefinePlugin(envKeys)
    ]
  };
};

webpack.base.config.js

GitHub: ygs-code/ot-system-client

461
462
463
464
465
466
467
468
469
470
//   // "process.env.DEBUG": JSON.stringify(process.env.DEBUG),
//   // "process.env.DefinePluginFlag": true
// }),

// // 注入全局变量
// new webpack.EnvironmentPlugin({
//   NODE_ENV, // 环境参数  除非有定义 process.env.NODE_ENV，否则就使用 NODE_ENV
//   target, // 环境参数
//   // htmlWebpackPluginOptions: stringToObject(htmlWebpackPluginOptions),
//   // EnvironmentPluginDEBUG: false

webpack.config.js

GitHub: grygorash/chrome-extension-react-typescript

102
103
104
105
106
107
108
109
110
111
    .concat(['.js', '.jsx', '.ts', '.tsx', '.css', '.scss']),
},
plugins: [
  new CleanWebpackPlugin({ verbose: false }),
  new webpack.ProgressPlugin(),
  new webpack.EnvironmentPlugin(['NODE_ENV']),
  new CopyWebpackPlugin({
    patterns: [
      {
        from: 'src/manifest.json',

bundle.js

GitHub: keplergl/kepler.gl

58
59
60
61
62
63
64
65
66

  node: {
    fs: 'empty'
  },

  plugins: [new webpack.EnvironmentPlugin(['MapboxAccessToken']), new BundleAnalyzerPlugin()]
});

module.exports = env => LIBRARY_BUNDLE_CONFIG(env);

206

+ 7 other calls in file

webpack.config.js

GitHub: nocodb/nocodb

32
33
34
35
36
37
38
39
40
41
  minimizer: [new TerserPlugin()],
  nodeEnv:false
},
externals: [nodeExternals()],
plugins: [
  new webpack.EnvironmentPlugin([
    'EE'
  ]),
],
target: 'node',

334

shared.js

GitHub: mastodon/mastodon

65
66
67
68
69
70
71
72
73
74
  rules: Object.keys(rules).map(key => rules[key]),
  strictExportPresence: true,
},

plugins: [
  new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
  new webpack.NormalModuleReplacementPlugin(
    /^history\//, (resource) => {
      // temporary fix for https://github.com/ReactTraining/react-router/issues/5576
      // to reduce bundle size

688

webpack.local.config.js

GitHub: nocodb/nocodb

42
43
44
45
46
47
48
49
50
  },
  node: {
    fs: 'empty',
    __dirname: false,
  },
  plugins: [new webpack.EnvironmentPlugin(['EE'])],

  target: 'node',
};

333

Other functions in webpack

Sorted by popularity

webpack.ProvidePlugin is the most popular function in webpack (1161 examples)

Other popular packages:

Home

About