Webpack: Using non-module javascript file with dependency on jquery

Question

Despite dozens of questions regarding using jquery with webpack, I can't figure out how to include JS file that depends on jquery and achieve the same effect as a script tag. Every approach mentioned on github or Stack Overflow are not explained in details and none have worked for me. In addition, I don't have experience with webpack.

I found those questions that sound close enough to mine but they do not answer this question specifically: question & another question & another. Those questions do not provide steps for achieving this result.

Overview: I'm using this template. I have replaced the nav-html file with code that requires a (non-module) JS file. The code in the file does not export anything and it should run globally.

See this commit for the base template before any changes.

Approach 1: Included the js file in the vendor array in the webpack.config.vendor.js, check this commit

Result 1: I can see the code in the vendor.js but when I put a breakpoint on chrome dev tools the code is not hit

Approach 2: Added require for the js file inside the boot.ts. Note that it is not a module. Check this commit.

Result 2: Uncaught ReferenceError: $ is not defined

Approach 3: Used Script loader. Check this commit.

Result 3: Uncaught ReferenceError: $ is not defined

Answer 1

Sorry, I haven't looked at you code but hopefully this helps.

You can expose anything in a module to the global scope just by creating a global var within one of you modules.

import * as $ from 'JQuery';
window.$ = $;

This will allow your non-module code to reference the Jquery that was loaded as a module.