webpack-dynamic-cdn-plugin

v1.0.3

Published

2 years ago

Plugin for rewrite, at runtime, webpack assets url for loading application from CDN dynamicaly

Downloads

0High
0Medium
0Low

djodjonx

webpack pluging dynamic-cdn html-webpack-plugin

webpack-dynamique-cdn-plugin

  npm i --save-dev webpack-dynamic-cdn-plugin

  yarn add --dev webpack-dynamic-cdn-plugin

This is a webpack plugin that help you loading webpack bundles from CDN dynamicaly. This plugin work with HTMLWebpackPlugin.

Why

Sometimes you need to deliver your code to different environments without wanting to re-build it. But the assets problem on cdn forces you to. With this plugin, all your assets will be loaded from your CDN (s) in a simple way, you only need to inject into your index.html from your server, a global variable which will contain the url of your cdn. Build once, run it everywhere!

Usage

Font side webpack conf

Require the plugin in your webpack config:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackDynamicCdnPlugin = require('webpack-dynamic-cdn-plugin');

Add the plugin to your webpack config as follows:

plugins: [
    new HtmlWebpackPlugin(),
    new WebpackDynamicCdnPlugin('my_awesome_var')
]

The plugin take a option variableName => String. If you don't add this option, it's __webpack_public_path__ by default.

The option should look like "https://some-url-of-CDN.com/" and always finish by "/".

If no option set, fallback is "/".

All variables are bind to window

The global variable __webpack_public_path__, used by webpack for load assets, be set by the plugin with your value defined on window too.

On server side

This is only an example for commons use cases, please refer to the server / proxy documentation to be able to perform this action.

Apache proxy with Module Apache mod_substitute

<Location "/">
    AddOutputFilterByType SUBSTITUTE text/html
    Substitute "s|<head>|expr=<head><script type="text/javascript">window.__webpack_public_path__ = "%{YOUR_URL_FROM_ENV_VAR}"</script>|i"
</Location>

Nginx proxy with ngx_http_sub_module

location / {
    sub_filter '<head>'  '<head><script type="text/javascript">window.__webpack_public_path__ = "$YOUR_URL_FROM_ENV_VAR"</script>';
    sub_filter_once on;
}

Contribution

You're free to contribute to this project by submitting issues and/or pull requests.

License

This project is licensed under MIT.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme