Static bundling from a remote url in webpack

webpack externals
webpack externals react
webpack externals not working
webpack include external js
webpack externals vue
webpack exclude module
webpack-external-import
webpack bundle dependencies

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

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!')
});

Static bundling from a remote url in webpack - webpack - iOS, 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. You don't need to be working on a fancy, large-scale project to use Webpack. James Hibbard demonstrates how you can use it to bundle a simple static site.

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!

How to Bundle a Simple Static Site Using Webpack, Loaders can transform files from a different language (like TypeScript) to JavaScript, or inline images as data URLs. Loaders even allow you to do� Webpack is a modern static file bundling tool. In case of JavaScript file bundling, it helps to eliminate the implicit dependency on sorted <script> tags in our markup. Instead of including many

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

Externals, The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to � Currently, browsers do not support importing static files like images or css directly via Javascript; however, plugins for Rollup (plugin-url, plugin-postcss, etc.) and loaders for Webpack (url

how to serve the bundle files in DEBUG in remote host? � Issue #120 , I do rsync the static directory to a production server after that. publicPath in your webpack config when you build bundles for remote server. publicPath in your webpack config should be pointed to the static files URL of your� $ webpack-dev-server --config ./path/to/webpack.dev.js To enable inline mode with hot module replacement, use: $ webpack-dev-server --inline --hot --config ./path/to/webpack.dev.js If the static document you want to serve is in another directory, you can tell the Webpack dev server using the --content-base flag like so:

Webpack 4, Webpack 4 - Import a Prebuilt Webpack Bundle at Runtime #7526 static analysis. importing an already bundled file causes a significant overhead tell the module loader how app1 , app2 , and app3 actually map to a URL. Suppose that I have class like this (written in typescript) and I bundle it with webpack into bundle.js. export class EntryPoint { static run() { } } In my index.html I will include the bundle, but then I would also like to call that static method.

Bundling Remote Scripts with Webpack, Bundling Remote Scripts with Webpack to be included from a remote CDN somewhere, and when bundling your application these pose a problem. If there's versioning available in the remote URL that's trivial, if not though you'll need to� in this example, jquery has no static export, its a global mutation, as is jqueryPlugin, so if you were bundling these with webpack you'd receive the same messages. there were no exports, each script either mutated or leveraged globals (window.$ = function(){} as a classic example), where script tags had to be specifically ordered or

Comments
  • 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.
  • Have you tested and confirmed this?
  • 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.