How to use the webpack.EnvironmentPlugin function in webpack

],
  },
  resolve: {
    extensions: [
      '.js', '.jsx',
      '.sass', '.scss',
      '.css', '.png',
      '.svg', '.gif',
      '.jpeg', '.jpg'
    ],
    alias: {
      'lodash.isequal': 'lodash-es/isEqual'
    },
  },
  plugins: [
    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env))),
    // new LodashModuleReplacementPlugin({
    //   shorthands: true,
    // }),
    new CaseSensitivePathsPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name]-[contenthash:8].css',
      chunkFilename: '[name]-[contenthash:8].chunk.css'
    }),
    new WebpackAssetsManifest({
      writeToDisk: true,
      publicPath: true
    }),
    // don't load all of moment's locales
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ],
  node: {

var webpack = require('webpack');
const config = require('./base.js');

config.plugins.push(
    // Set process.env.NODE_ENV to development, if it's not set, and
    // replaces instances in the code.
    new webpack.EnvironmentPlugin({ 'NODE_ENV': 'development' })
);

config.devtool = 'cheap-module-eval-source-map';

module.exports = config;

webpack(config) {
    config.plugins.push(new webpack.EnvironmentPlugin([
      'JSON_PLACEHOLDER_URL',
      'GRAPHQL_SERVER_URL'
    ]))
    return config
  }
};

webpack(config) {
    config.plugins.push(new webpack.EnvironmentPlugin(localEnv));

    return config;
  }
});

app: MAIN_ENTRY_POINT,
        vendor: config.vendor
      }
    : MAIN_ENTRY_POINT,
  target: 'web',
  output: {
    jsonpFunction: 'suiWebpackJsonp',
    chunkFilename: '[name].[chunkhash:8].js',
    filename: 'index.js'
  },
  optimization: {
    minimizer: [minifyJs(sourceMap)]
  },
  plugins: cleanList([
    new webpack.HashedModuleIdsPlugin(),
    new webpack.EnvironmentPlugin(envVars(config.env)),
    definePlugin()
  ]),
  module: {
    rules: [babelRules]
  },
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
}

exclude: /node_modules/
      }
    ]
  },
  node: {
    crypto: false
  }
}

if (NODE_TARGET === 'node') {
  config.externals = [nodeExternals()]
  config.plugins = [
    new webpack.ProvidePlugin({
      btoa: 'btoa'
    }),
    new webpack.EnvironmentPlugin(Object.keys(process.env))
  ]
} else if (production) {
  config.plugins = [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      mangle: true,
      compress: {
        warnings: false
      }
    })
  ]
}

module.exports = config

module.exports = function(config, isPluginCommand) {
  config.plugins.push(new webpack.EnvironmentPlugin(["ENV"]));
  config.plugins.push(
    new CopyWebpackPlugin([
      {
        from: path.resolve("./resources/icon.png"),
        to: path.resolve(pluginResourcesPath)
      }
    ])
  );
  config.module.rules.push({
    test: /\.(html)$/,
    use: [
      {
        loader: "@skpm/extract-loader"
      },
      {
        loader: "html-loader",

webpack: (config) => {
    const originalEntry = config.entry;
    config.entry = () => originalEntry()
      .then((entry) => ({
        ...entry,
        'appStyles': './content/styles/styles.scss',
      }));

    config.plugins.push(
      new webpack.EnvironmentPlugin(process.env)
    );

    return config;
  },
}));

whitelist: [/\.(?!(?:jsx?|json)$).{1,5}$/i, /^smooth[/\\]/],
            }),
            'graphql/type',
            'graphql/language',
            'graphql/execution',
            'graphql/validation',
          ]
        : undefined,
    output: {
      path: path.join(config.cachePath, target, 'static'),
      filename: dev ? '[name].js' : '[name]-bundle-[chunkhash:8].js',
      publicPath: `/web/static/`,
      libraryTarget: target === 'node' ? 'commonjs2' : undefined,
    },
    plugins: [
      new webpack.EnvironmentPlugin({
        __smooth_blocks: blocksPath,
        __smooth_pages: config.pagesPath,
      }),
      new LoadablePlugin(),
      ...(target === 'node' && dev ? [new SmoothCacheHotReloader()] : []),
      ...(target === 'web' && dev
        ? [new webpack.HotModuleReplacementPlugin()]
        : []),
    ],
  }

  const webpackConfig = onCreateWebpackConfig(config)({
    stage: getStage({ target, dev }),
    webpackConfig: defaultWebpackConfig,
  })

filename: getAssetPath('[name].js'),
    chunkFilename: getAssetPath('chunk-[id].js'),
    devtoolModuleFilenameTemplate: function(info) {
      return path.resolve(info.absoluteResourcePath).replace(/\\/g, '/');
    },
  },
  context: hopsConfig.appDir,
  resolve: require('../sections/resolve')('develop'),
  module: {
    rules: require('../sections/module-rules')('develop'),
  },
  plugins: [
    new ServiceWorkerPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.EnvironmentPlugin(
      Object.assign(
        {
          NODE_ENV: 'development',
        },
        hopsConfig.envVars
      )
    ),
  ],
  performance: {
    hints: false,
  },
  devtool: 'cheap-module-eval-source-map',
  watchOptions: {
    aggregateTimeout: 300,
    ignored: /node_modules/,
  },