How to load remote file in webpack

Question

 the remote file is a single components compiled by webpack 
  the wenpack config as follow:


    {
     .....
     library: library
    ,externals: externals
    ,libraryTarget: "umd"
     .....
    }

the components is in the cdn, i want to load and use the remote components in react. and how to use it like the Pseudo code :

   ajax -> get a json > { components name } > use the name to load romote file    
   for example the json have the botton i need to load the botton.min.js

    var Button = reuqire('http://botton.min.js')
    class App extends React.Component {
    render() {
        return (
            <div>
            <Botton/>
            </div>
        );
    }
}
export default App;

Possible duplicate of [how to use webpack to load CDN or external vendor javascript lib in js file, not in html file](https://stackoverflow.com/questions/33250174/how-to-use-webpack-to-load-cdn-or-external-vendor-javascript-lib-in-js-file-not) — Heretic Monkey, May 05 '18 at 23:30

score 1 · Answer 1 · answered Nov 09 '16 at 11:58

1

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

answered Nov 09 '16 at 11:58

Johnny

309
1
3
6

first,thaks for your ask, i found a same idea as you, https://github.com/yariv/ReactScriptLoader – abnerCrack Nov 24 '16 at 05:22
I'm giving this a +1 because one of the creators of Webpack had the same answer here: https://github.com/webpack/webpack/issues/240#issuecomment-40686135 – Ryan Mar 21 '17 at 17:11

score 1 · Answer 2 · answered Jun 26 '20 at 22:25

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

More info here: https://stackoverflow.com/a/62603539/8650621

Basically, 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.

piecioshka · Answer 3 · 2019-10-25T14:14:06.243

0

Maybe you can find solutions on the following resoures:

edited Oct 25 '19 at 14:14

answered May 04 '16 at 11:28

piecioshka

4,752
2
20
29

How to load remote file in webpack

3 Answers3