How to bundle legacy js files with webpack?

Question

Suppose I have two files

a.js:

alert("hello from a.js");

b.js

alert("hello from b.js");

is there any way to bundle them with WebPack so that

1. I get both alerts synchronously as soon as bundle is loaded
2. alerts should be in the same order as declared "hello from a" and then "hello from b"

Answer 1

Webpack natively supports CommonJS ( require / import ) and AMD style, and since yours are not falling into those categories, I believe you should look at the shimming modules section

https://github.com/webpack/docs/wiki/shimming-modules

This is from their header

In some cases webpack cannot parse some file, because it has a unsupported module format or isn't even in a module format. Therefore you have many options to convert the file into a module.

Answer 2

For anyone else that comes looking, the new (webpack 4+) link to the docs on shimming is here: https://webpack.js.org/guides/shimming/

Answer 3

For me personally, this webpack plugin was most helpful and headache free: https://www.npmjs.com/package/webpack-merge-and-include-globally