Static bundling from a remote url in webpack

Question

This seems like a really simple question and have searched for an answer, but all the answers are about dynamically loading a remote url.

I have a need to bundle libraries that are published as raw (non-NPM) source in Github. I would like webpack to download and include these files in my bundle. Caching the file locally for a period of time would be a bonus.

For example, I would like to be able to write:

const mylib=require("http://www.espruino.com/modules/ADNS5050.min.js");

And have webpack download and include this js file statically. The bundle is going to be pushed to an embedded device that doesn't have any networking!

Thanks

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

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

See the solution here: https://stackoverflow.com/a/62603539/8650621

score 0 · Answer 2 · answered Feb 23 '18 at 23:14

0

The webpack-require-http plugin should meet your needs.

Or try scriptjs:

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

answered Feb 23 '18 at 23:14

Paul Calabro

1,578
1
15
32

Thanks but I believe both of these are async loaders that defer the load until after the bundle is built, ie. urls are resolved at runtime. I want to resolve the url at build time. – jugglingcats Feb 23 '18 at 23:32
Have you tested and confirmed this? – Paul Calabro Feb 24 '18 at 20:03

score 0 · Accepted Answer · answered Feb 23 '18 at 23:36

I managed to get something basic working using a function in externals, like this...

npm install --save-dev fetch

... webpack config ...

var fetchUrl = require('fetch').fetchUrl;
module.exports = {
...
    externals: function(context, request, callback) {
        if ( request.indexOf('http') === 0 ) {
            fetchUrl(request, function(error, meta, body){
                if (error) {
                    throw error;
                }
                callback(null, body.toString());
            });
            return;
        }
        switch (request) {
            // these are provided on the target platform
            case 'PCD8544':
            case 'Flash':
                return callback(null, 'require("'+request+'")');
        }
        // default
        callback();
    },
...
}

Just need to add some basic caching when running webpack --watch!

I tried to write a very simple loader, but webpack wants to resolve the resource before calling the loader, and obviously can't do this with a url. — jugglingcats, Feb 23 '18 at 23:36

Static bundling from a remote url in webpack

3 Answers3