如何在webpack模块中加载备用jquery？

Question

I need to load alternate versions of jQuery other than the one in my node_modules. I have a local copy of the script but I am unable to get it to load in my webpack app.ts. I have removed the global jQuery and resolve path for node_modules in my webpack config since I do not want the version from node_modules. However I can't figure out how I can pass the loaded jquery to the scripts that require it.

I have multiple entry points (app.ts) each which needs to be able to load a different jquery so I can not define jquery in the webpack config as I would like to use the same config for processing all my entry points.

app.ts

import jquery from '../../../js/jquery-3.3.1.js';

// tried this but didn't help
// window.$ = jquery;
// window.jquery = jquery;

// these two require jquery but fail, it only works if I add back in
// the webpack config to find jquery in node_modules which is what I 
// don't want. popper.js has the same issue as jquery.
import '../../../js/popper-1.12.9.min.js';
import '../../../js/bootstrap-4.0.0.js';
import './js/jquery.matchHeight-min.js';

...

Answer 1

I think there are several approaches to this issue.

• Add some scripting. It's possible to create a simple function that will set different resolve.alias values for different given entry points. and then use ProvidePlugin or even imports-loader in order to do shimming and set it globally. shimming docs
• Use expose-loader . with that you can require different scripts yet they all will be exposed with the same variable name.