Automatically add JS/CSS to HTML files for CDN resources

[cowwoc]

Currently, when loading resources from CDNs, you need to manually add <script> and <link> tags to the HTML file, exports to the Webpack configuration and require() to the code that uses it. This is error prone for transitive dependencies (users may forget to add a <script> or <link> tag). Example:

index.html depends on index.js which depends on chunk.js which depends on jquery.js. The author of index.js may forget to add <script> and <link> tags for chunk.js's dependencies. This quickly gets out of hand as soon as dependencies have their own dependencies.

The fact that chunk.js invokes require('./jquery.js') should cause a <script type='text/javascript' src='cdn/jquery.js'> to get added to index.html on their behalf. Similarly, the fact that chunk.js invokes require('./jquery.css') should cause a <link rel='stylesheet' type='text/css' href='cdn/jquery.css'/> to get added on their behalf.

In an ideal world I'd tell webpack (at build-time) what scripts to load asynchronously, but then have require('foo') resolve synchronously at runtime, and have the library loaded without exporting globals. I'm not fixated on any particular implementation details.

[sokra]

This propably can be part of https://github.com/ampedandwired/html-webpack-plugin

[alexeygolev]

+1

[cowwoc]

Motivation: http://stackoverflow.com/a/558494/14731

[cowwoc]

@sokra I filed a feature request against html-webpack-plugin, but I just want to point out that it is an extremely low-volume plugin. I don't expect them to implement this (or any other new feature) anytime soon. Anyway, in the meantime I will do my best to drum up support for this feature request.

[cowwoc]

This issue is related to #536

[AlistairB]

I would also like this. There doesn't seem to be a hook to implement something like this (I'm new to webpack though so could be missing it).

Other features I want (either by configuration or a hook):

• Use latest version from CDN (eg hit http://api.cdnjs.com/libraries?search=lodash.js and use the version you find)
• Include fallback logic if CDN resource is not resolvable (either when building, or some in page logic that handles it).

[screendriver]

👍

[sokra]

see https://github.com/ampedandwired/html-webpack-plugin

[cowwoc]

I believe the relevant issue is jantimon/html-webpack-plugin#12

[kizzlebot]

👍

[sergeymorkovkin]

👍

[dongpei021]

I read through the thread, and the html-webpack-plugin#12, has the feature description in @cowwoc been implemented?

[cowwoc]

@dongpei021 I'm not using webpack at the moment so I can't check, but at first glance it looks like it might do it. I've asked the guys over at #536 to review it.

[bebraw]

See html-webpack-cdn-plugin.

[shirotech]

Another solution is webpack-cdn-plugin

[geoshar]

Hey! Take a look at this one autoloader-cdn