Basti’s Buggy Blog

Poking at software.

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 websites1) 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);
});
// ...

  1. some developers seem to confuse this ↩︎