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