Using a remote entry with webpack

Question

I'm trying to set up a webpack config in a server enviroment that can output a bundle from a remote source. The source is a .js file and will be fetched through GET-requests. Is this possible?

Remote file - example.com/file.js

export default () => console.log('Hello world');

Webpack with pseudocode

const remoteSource = await fetchFromURL('http://example.com/file.js');

webpack({
  entry: remoteSource,
  output: {
    filename: 'output.js',
    path: path.resolve(__dirname, 'src'),
    libraryTarget: "umd",
  }
})

Any ideas are appreciated!

This seems like an XY problem to me. Why do you even need this? Either way, if you want module resolution to work, it would be pretty (very) difficult. Otherwise, sure, you could just wrap the entire thing in an async function, write the fetched string to a file, and use that filename as input to webpack. Ugly, but it works. — 101arrowz, Mar 08 '20 at 18:54
Do you know if it's possible to compile the string after the fetch and then pass it webpack? Mainly to avoid writing files — NoIndexFound, Mar 08 '20 at 19:06
If you have no module resolution, why are you even using a module bundler? You could create an in memory filesystem and load from there but at that point you should question your reason for using webpack at all. — 101arrowz, Mar 08 '20 at 19:22
The use case is a bit more complex then the example I presented so I understand the confusion, however the technical question still remains whether if it's possible to build bundles from remote sources or not. I feel like there could be other alternatives than the one from your first comment — NoIndexFound, Mar 08 '20 at 19:38

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

I have looked around for a solution but you were the only one who gave me a hint. All other 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.

download.js

const https = require('https');
const fs = require('fs');

const download = (url, dest, callback) => {
    let file = fs.createWriteStream(dest);
    https.get(url, function(response) {
        // noinspection JSUnresolvedFunction
        response.pipe(file);
        file.on('finish', function() {
            file.close();
            callback();
        });
    });
}

download('http://www.mycdn.com/my-file.js', './generated-soruces/src/js/', () => {
    console.log('Downloaded File!')
});

package.json

...
"clean": "rimraf dist",
"clean:all": "rimraf dist node_config node_modules",
"build": "export NODE_ENV=dev && npm run clean && node ./download.js && webpack",
...

Using a remote entry with webpack

1 Answers1

Linked