How do I tell webpack to both ignore a file from the bundle as well as not require it?

Let's say I have the following file setup:

src
| - index.js
| - App.js
| - App.css
| - MyComponent.js
api
| - api.js

Then let's say this is what api.js looks like:

api.js


export const add1 = (param) => {
   return param + 1;
}

export const add2 = (param) => {
   return param + 2;
}

Let's then say that both index.js and MyComponent.js import and call the functions add1 and add2 from api.js. When I'm deploying my application, what I'll need to do is import js file scripts in my html. One being my bundle file and the other being the api file like such:

<script src="bundle.js"></script>
<script src="api.js"></script>

The api.js file will not be the same api.js file thats in my project folder but it will have the same methods with different implementations and it will not be written as a module. It will just be a script file with the functions written in it.

How do I get webpack to build a bundle in such a way that:

• api.js is not included in the bundle
• the bundle will not try to import an api.js file

I figured out how to build the bundle so that api.js is excluded but it will make a require call for that api file when I don't want it to. I just want the "api.js" function calls in the bundle to be as if those functions were globally available.