Skip to content

djodjonx/webpack-dynamic-cdn-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

webpack-dynamique-cdn-plugin

Webpack Dynamic CDN Plugin

Build Once, run it everywhere.

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

Install

  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.

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published