webpack externals jqueryui and bootstrap

Question

How do I configure the externals section in webpack configuration to exclude jqueryui and bootstrap from the output?

webpack configuration:

externals: {
    'jquery': 'jQuery',
    'jqueryui': 'jqueryui',
    'bootstrap': 'bootstrap'
}

Typescript code:

import 'jquery';
import 'jqueryui';
import 'bootstrap';

Type definitions of all 3 above are in the @types/ folder. jquery works fine but the other two don't work. On runtime, the last two were not found even though all 3 are brought in in the .html file with script tags. The jquery webpack configuration is clear to me. jquery is the libarary name. jQuery is the global variable name. What is confusing to me is how to make the "lib: global-var" syntax work for jqueryui and bootstrap as none of them has a global variable.

Answer 1

The ": true" method actually didn't work. I got 'jqueryui not found' error. I then tried this:

externals {
    ...
    'jqueryui': 'jQuery',
    'bootstrap': 'jQuery'
}

Then it worked. These two libraries extend $. This works but I guess not in an intended way as __webpack_require_ wouldn't try to make sure they exist. It only depends on the existence of jQuery. This however satisfies TypeScript and the webpack bundling process.