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?

Hakan Bilgin · Accepted Answer · 2020-08-11 14:28:12Z

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.

answered Aug 11, 2020 at 14:28

Hakan Bilgin

513 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

alexandernst Over a year ago

This won't expose any global variables. It will hide them inside their own "namespace" (so to say), which will make them unusable.

Hakan Bilgin Over a year ago

'old-style import-and-use libraries' generally expose themselves by adding a property to window object, so they become globally accessible. For example, when you import JQuery either by a separate <script /> tag or within another bundle file; $ object is added to window. If it is not the case for your foo.js library, there should be a problem how it is shipped.

alexandernst Over a year ago

Indeed. These libraries were defining functions without binding them to the window object. This works fine if you "include" the script from inside the HTML, but it doesn't work when using webpack's "import" statement (as everything get's wrapped inside an anonymous function). I modified the libraries in order to make them bind themselves to the window object and now everything works as expected.

Collectives™ on Stack Overflow

Injecting multiple external javascript files with Webpack

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related