title: how to include env variables into Webpack 5?
body: <p>I know there is a lot of documentation online, and several questions related with this, but nothing seems to work.</p>
  <p>I have a simple vanilla JS project, bundled with webpack.</p>
  <p>This is my <code>webpack.dev.js</code> file:</p>
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  
  module.exports = {
    mode: 'development',
    devtool: 'eval-source-map',
    output: {
      path: path.resolve('public'),
      filename: 'dist/bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader',
          ],
        },
        {
          test: /\.svg$/,
          use: 'file-loader',
        },
      ],
    },
    plugins: [
      new webpack.EnvironmentPlugin(['CUSTOM_PATH']),
    ],
    devServer: {
      static: './public',
    },
  };
  </code></pre>
  <p>This is my <code>.env</code> file:</p>
  <pre><code>CUSTOM_PATH=https://test.s3.us-west-2.amazonaws.com/test/dev/
  </code></pre>
  <p>And finally this is the script on my <code>package.json</code></p>
  <pre><code>&quot;start&quot;: &quot;export $(xargs &lt; ../.env) &amp;&amp; webpack serve --open --config webpack.dev.js&quot;,
  </code></pre>
  <p>When I start the project, I got an error, saying <code>process</code> is not defined, when trying to do a simple <code>console.log(process.env.CUSTOM_PATH)</code></p>
  <blockquote>
  <p><code>Uncaught (in promise) ReferenceError: process is not defined</code></p>
  </blockquote>
  <p>This will run on the browser, not in a node server.</p>
  <p>What's missing? How can I build with an environment variable?</p>