how to use webpack to load CDN or external vendor javascript lib in js file, not in html file

Question

I am using react starter kit for client side programming. It uses react and webpack. No index.html or any html to edit, all js files. My question is if I want to load a vend

Answer 1

I have looked around for a solution and most of all proposals were based on externals, which is not valid in my case.

In this other post, I have posted my solution: https://stackoverflow.com/a/62603539/8650621

In other words, I finished using a separate JS file which is responsible for downloading the desired file into a local directory. Then WebPack scans this directory and bundles the downloaded files together with the application.

Answer 2

Use webpack's externals:

externals allows you to specify dependencies for your library that are not resolved by webpack, but become dependencies of the output. This means they are imported from the environment during runtime.

Answer 3

var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
  $('body').html('It works!')
});

Answer 4

You can create a script tag in your JS as

$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))

Answer 5

There is one html file that is definitely being used to serve to users with your js bundle attached. Probably you could attach the script tag into that html file

Answer 6

externals is not intended to let you do this. It means "don't compile this resource into the final bundle because I will include it myself"

What you need is a script loader implementation such as script.js. I also wrote a simple app to compare different script loader implementations: link.