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

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 vendor js lib from cloud, how to do I do that?

It would be easy to do that in a html file. `<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>`

However, in js file, it only uses npm installed packages. How can I import the above lib with no html file? I tried import and require, they only work for local files.

update 10/21/15
So far I tried two directions, neither is ideal.

1. @minheq yes there is a html file sort of for react start kit. It is html.js under src/components/Html. I can put cloud lib and all its dependencies there like this:

<!-- language: lang-html -->

<div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
<script src="/app.js"></script>
<script dangerouslySetInnerHTML={this.trackingCode()} />
</body>

Good news is it works, I don't need do anything else in js file, no import or require. However, now I have two jquery libs loaded in different ways. One in here, the other through npm and webpack. I wonder it will give me trouble later. The react-routing I use give me 'undefined variable' error if I type a none home path in browser window due to the server side loading I guess. So this solution is not very good.

2. Use webpack externals feature. This is documented as: [link][1]. "You can use the externals options for applications too, when you want to import an existing API into the bundle. I.e. you want to use jquery from CDN (separate <script> tag) and still want to require("jquery") in your bundle. Just specify it as external: { externals: { jquery: "jQuery" } }."
However, the documentation I found a few places are all fussy about how to do this exactly. So far I have no idea how to use it to replace `<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>` in html.


[1]:

[To see links please register here]

Use webpack's [externals][1]:

> `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.


[1]:

[To see links please register here]

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>"))

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

`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][1]. I also wrote a simple app to compare different script loader implementations: [link][2].


[1]:

[To see links please register here]

[2]:

[To see links please register here]

=

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

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:

[To see links please register here]

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.