Injecting multiple external javascript files with Webpack

Question

Let's say I have a few external javascript files (libraries, if you prefer to call them that way). Those files haven't been adapted to any of the "modern" JS functionalities, meaning that I can't import them like I'd do with some of the most common libraries nowadays (lodash, axios, etc...). The files in question have been always used as old-style import-and-use libraries ( <script src="foo.js"></script> ).

How can I make Webpack pack (concatenate) all those files and inject them in the head of my index.html , right before my actual bundle?

Answer 1

You can download 'foo.js' manually and add it to project repo. Imagine like you have a folder called 'external-libs' and you can simply import foo.js as something like following

import '../../external-libs/foo.js';

This will be enough for Webpack to append the content of foo.js to your final bundle.