Bundling Dynamic Dependencies in Webpack

Webpack is the de-facto solution for combating the ugly mess that people like to call the web.

Building modern web applications (not to be confused with websites¹) sometimes feels like trying to get your Python code running on a BASIC interpreter.

The Problem

Some (thirdparty) code requires other files with expressions that cannot be resolved by webpack at compile-time. Webpack tries to generate a regular expression that determines which files to include in the webpack bundle. In more complex expressions, webpack is unable to determine which files to include, thus an empty context map will be created.

A dynamic import that cannot be resolved might look like this:

// ...
var FILES = UglifyJS.FILES = [
    "../lib/utils.js",
    "../lib/ast.js",
    "../lib/parse.js",
    "../lib/transform.js",
    "../lib/scope.js",
    "../lib/output.js",
    "../lib/compress.js",
    "../lib/sourcemap.js",
    "../lib/mozilla-ast.js",
    "../lib/propmangle.js",
    "./exports.js",
].map(function(file){
    return require.resolve(file);
});
// ...