Import non-module vendor script in webpack

Question

I'm building an app with the AirConsole JS service. AirConsole only provides their library as a .js file you would include in your page with the usual:

<script type="text/javascript" src="https://www.airconsole.com/api/airconsole-1.6.0.js"></script>

However, I'm using Webpack and would like to import the script into my other JS files. I have tried a few methods with no luck:

1. Create an entry file named vendor which imports the airconsole.js file. This creates a vendor.bundle.js file which I can include on my page
2. Add the AirConsole path to my index entry point so the script is included in the bundle.js file. With this method I can verify the AirConsole code is included in the bundle.js file but attempting to create a new instance of AirConsole results in AirConsole is undefined

Am I on the right track with these methods? If not, what is the recommended way to import a non-module .js file?

Answer 1

The best way is by an action which we call "shimming". You can check out our new docs page for information. There are a few different ways to do on it (that depend on the needs) for your non-module.

https://webpack.js.org/guides/shimming/