webpack-dynamic-cdn-plugin
v1.0.3
Published
Plugin for rewrite, at runtime, webpack assets url for loading application from CDN dynamicaly
Downloads
6
Maintainers
djodjonxReadme
webpack-dynamique-cdn-plugin
npm i --save-dev webpack-dynamic-cdn-plugin yarn add --dev webpack-dynamic-cdn-pluginThis 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.