First, decide whether you need to burn-in or load-in your environment variables, then apply the suitable webpack setup.

: set at bundle time in CI; changing the environment values on the server won't affect the values in the code.

: set at load time; CI can't control the values; setting the environment values on the server will impact the values in the code.

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './index.js',
  target: 'node',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
  };

 is a widely used package with numerous features managed by excellent maintainers. Following the demo on the README works immediately. However, it doesn't bring much additional functionality compared to this small plugin and doesn't require much extra code. It also doesn't permit you to use other dotenv libraries like 

In this video, webpack was installed as a production dependency, but it should have been a devdependency.

---
title: Configuring Your Webpack Builds
privateVideoUrl: https://stream.mux.com/EF5bPDuyh7aHc01DiC02b65d02HDnHYsBI01mXcxheRv8018.m3u8
isPublicLesson: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/environment-variables-for-web-developers-app/-/tree/main/code/module_01/lesson_01.04/App?ref_type=heads
---

## Process

First, decide whether you need to burn-in or load-in your environment variables, then apply the suitable webpack setup.

### Burn-in vs load-in

When do you set `process.env` values?

**Burn-in**: set at bundle time in CI; changing the environment values on the server won't affect the values in the code.

**Load-in**: set at load time; CI can't control the values; setting the environment values on the server will impact the values in the code.

### Code

#### Load-in

```javascript
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './index.js',
  target: 'node',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
  };
```

#### Burn-in

```javascript
const path = require('path');
const webpack = require('webpack');
require('dotenv').config();

module.exports = {
  mode: 'development',
  entry: './index.js',
  target: 'node',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.DefinePlugin({
        "process.env": JSON.stringify(process.env)
      }),
  ]
  };
```

## Alternative Methods

[dotenv-webpack](https://www.npmjs.com/package/dotenv-webpack) is a widely used package with numerous features managed by excellent maintainers. Following the demo on the README works immediately. However, it doesn't bring much additional functionality compared to this small plugin and doesn't require much extra code. It also doesn't permit you to use other dotenv libraries like `dotenv-flow`.

## Additional Notes

In this video, webpack was installed as a production dependency, but it should have been a devdependency.

## References

-   [What is webpack?](https://webpack.js.org/concepts/)
-   Building without `dotenv-webpack`: [passing .env file variables to webpack config](https://stackoverflow.com/questions/46224986/how-to-pass-env-file-variables-to-webpack-config)


Kemal Ahmed

Configuring Your Webpack Builds

We're going to make a webpack bundle using .n.

To those of you who haven't used webpack before, it's like zip for JavaScript

So if you want to deploy code to a server in an easy way, you make a bundle.

Or it will be built into your build tool for you.

This is typically for front-end, hence the name webpack for web.

But it can also be good for deploying to scripting providers like Amazon Lambda

Not only does it bundle your node modules into one file, you get to do a bunch

things to your code, like minifying for size.

And in this case, we'll be saving the current environment variable valuables

And by saving, I mean, since during development, your code will get the values

You may not always be able to set these values, so you set them in advance.

Tricky thing is deciding whether or not you want to burn in your values.

Because once it's built, there's no changing it.

If you want to change the environment values, you need to replace the bundle.

So when would you want to burn in your dot-end?

When you can't control the environment from a pre-built interface, such as if

a static front-end, or if you're uploading directly to a server where you can't

you're using commands like SSH and you can't set the values easily.

And actually, before we continue, even if you do burn in, your environment

to a bundle, please avoid uploading your bundles to get.

It's unsafe, it's messy, and even if you don't have secrets, it's not a good

You don't need to do burn in even for bundles.

And if you're deploying to a service that has a dashboard for setting your

variables, such as AWS Lambda, which we will cover in a later video, you can

For the demo that we're going to do, we'll be building a very simple node

script that probably would not need burn in, but it makes it easy to understand

of the environment variables, how it works with Webpack.

We'll first build it without burn in, so you can see.

And then we'll show the difference in the bundle after we add dot-end.

So for the demo, we're going to start with the 1.3 code, and we're going to

So I'm going to do that right now, but I'm not just going to install the Web

library, but I'm also going to install the CLI just so that way we can work

Now that we've installed Webpack and the CLI, I'm going to add a script to the

so that way we can run Webpack using the dev dependencies.

That way you don't have to install it as a global bundle Webpack.

To use Webpack, we need a config file in the root folder.

It's going to go in the root folder, and I'm going to paste a basic example and

So this is an example that does not use dot-end, as in this is not using burn-

Some things about it is that it's in development mode.

It uses an entry point of index.js, which should be this file.

And it outputs a main dot-js in a folder called dist.

I'll build the Webpack and then you'll be able to see what happens.

We have a main dot-js and it's got a bunch of stuff in there.

You'll notice that if you go to where the code is in here, you can actually

if one of the variables, server URL, and see that it is still says process.n.

That means that it will use the value of server URL on the actual server

this is being served to or where it's deployed.

That's what we'll do is see what happens when we do add the burn-in.

So to do that, we actually add dot-end in the Webpack config file directly.

So we'll require that, require dot-end, and we'll configure it.

And now what we'll do is we'll add a small plugin to Webpack that converts the

like the environment variables into their respective values.

We can even control the mode type using our node-end value.

So to do that, we can set a variable which defaults to development, and then if

of node-end is production, then we change that variable value to production,

Now let's see what the bundle looks like when you run it.

When you look at the main, again, it's a lot harder to read.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript