Can't figure out a basic scenario working with my own CDN and packages

[shaipetel]

Basic scenario working with webpack and this package.

example:

main.ts

export class Main {
    public Init(): string {
        console.log("Init was called");
        return "Init done";
    }

    public GetDelayedMessage(): Promise<string> {
        return Promise.resolve("Thanks");
    }
}

I'm hosting "es6-promise" under my own CDN: https://cdn.company.com/libs/es6-promise.js

I can't figure out how to make webpack not bundle es6-promise but instead load it from my CDN. Better yet - I would ultimately would like to lazy-load it only when someone called GetDelayedMessage, if the code changes to this:

    public Init(): string {
        console.log("Init was called");
        return "Init done";
    }

    public GetDelayedMessage(): Promise<string> {
        return import("es6-promise").then(() => { return "Thanks!"; });
    }
}

Could someone perhaps provide a basic webpack.config.js that covers this scenario? I read through the documentation but can't find all the info regarding:

1. Usage with ManifestPlugin - what is the content of "manifest.json"?
2. options.resolver - what is the signature of this function (which parameters it gets)?

I tried to set up this plugin but that didn't work:

    resolver: function (packageName, version, params) {
        switch (packageName) {
            case "es6-promise":
                return { name: packageName, var: "Promise", url: "https://apps.kwizcom.com/libs/es6-promise/es6-promise.min.js", version: version };
        }
        return null;
    }
})

Thanks!!!

[mgenev]

Same here, how do you set the urls to your own CDN? This module is not very useful if it only supports 1 CDN

[aulisius]

Hi,

Sorry for the delay. It is indeed possible to use your own CDNs with this plugin.

@shaipetel What error are you exactly getting with that config? The way you have provided a custom resolver looks correct to me. Can you pass verbose:true in the plugin options?

@mgenev You can provide a custom resolver such as follows.

const HtmlWebpackPlugin = require("html-webpack-plugin");
const DynamicCdnWebpackPlugin = require("dynamic-cdn-webpack-plugin");

module.exports = {
  mode: "production",
  plugins: [
    new HtmlWebpackPlugin(),
    new DynamicCdnWebpackPlugin({
      resolver: (packageName, packageVersion, options) => {
        let env = options.env || "development";
        if (packageName === "react") {
          return {
            name: packageName,
            var: "React",
            version: packageVersion,
            url: `https://cdn.jsdelivr.net/npm/${packageName}@${packageVersion}/umd/react.${env}.min.js`
          };
        } else {
          return null;
        }
      }
    })
  ]
};

Here I'm loading react package alone through the jsDelivr CDN instead of using the default unpkg. You can pass a similar function to be used with another CDN of your choice.

[aulisius]

@shaipetel , on closer inspection, it looks like the module loaded from https://apps.kwizcom.com/libs/es6-promise/es6-promise.min.js attaches the promise to the window under ES6Promise.

Can you change your config to something like this

resolver: function (packageName, version, params) {
  switch (packageName) {
    case "es6-promise":
      return {
        name: packageName,
        var: "ES6Promise",
        url: "https://apps.kwizcom.com/libs/es6-promise/es6-promise.min.js",
        version: version
      };
  }
  return null;
}

[shaipetel]

thanks, looks like what I needed. I'll give it a try