Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mastilver/dynamic-cdn-webpack-plugin
Get your dependencies from a cdn rather than bundling them in your app
https://github.com/mastilver/dynamic-cdn-webpack-plugin
cdn dynamic html html-webpack-plugin unpkg webpack webpack-manifest-plugin
Last synced: 7 days ago
JSON representation
Get your dependencies from a cdn rather than bundling them in your app
- Host: GitHub
- URL: https://github.com/mastilver/dynamic-cdn-webpack-plugin
- Owner: mastilver
- License: mit
- Created: 2017-04-09T16:39:28.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-06-13T03:31:33.000Z (over 1 year ago)
- Last Synced: 2025-01-14T04:46:38.152Z (8 days ago)
- Topics: cdn, dynamic, html, html-webpack-plugin, unpkg, webpack, webpack-manifest-plugin
- Language: JavaScript
- Homepage:
- Size: 166 KB
- Stars: 345
- Watchers: 4
- Forks: 37
- Open Issues: 19
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- License: license
Awesome Lists containing this project
README
# dynamic-cdn-webpack-plugin
[](https://www.npmjs.com/package/dynamic-cdn-webpack-plugin) [](https://travis-ci.org/mastilver/dynamic-cdn-webpack-plugin) [](https://codecov.io/gh/mastilver/dynamic-cdn-webpack-plugin?branch=master) [](https://david-dm.org/mastilver/dynamic-cdn-webpack-plugin) [](https://github.com/sindresorhus/xo)
> Dynamically get your dependencies from a cdn rather than bundling them in your app
## Install
```
$ npm install --save-dev dynamic-cdn-webpack-plugin module-to-cdn
```
## Compatibility with webpack
If you are using `webpack --version <= 3` then you should be installing with the following command.
```
$ npm install --save-dev [email protected] module-to-cdn
```
## Usage with HtmlWebpackPlugin
`webpack.config.js`
```js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const DynamicCdnWebpackPlugin = require('dynamic-cdn-webpack-plugin');
module.exports = {
entry: {
'app.js': './src/app.js'
},
output: {
path.resolve(__dirname, './build'),
},
plugins: [
new HtmlWebpackPlugin(),
new DynamicCdnWebpackPlugin()
]
}
```
`app.js`
```js
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
// ... do react stuff
```
`webpack --mode=production` will generate:
```js
/* simplified webpack build */
[function(module, __webpack_exports__, __webpack_require__) {
module.exports = React;
}),
(function(module, __webpack_exports__, __webpack_require__) {
module.exports = ReactRouterDOM;
}),
(function(module, __webpack_exports__, __webpack_require__) {
var react = __webpack_require__(0);
var reactRouterDOM = __webpack_require__(1);
/* ... */
})]
```
```html
Webpack App
```
## Usage with ManifestPlugin
`webpack.config.js`
```js
const path = require('path');
const ManifestPlugin = require('webpack-manifest-plugin');
const DynamicCdnWebpackPlugin = require('dynamic-cdn-webpack-plugin');
module.exports = {
entry: {
'app': './src/app.js'
},
output: {
path.resolve(__dirname, './build'),
},
plugins: [
new ManifestPlugin({
fileName: 'manifest.json'
}),
new DynamicCdnWebpackPlugin()
]
}
```
`app.js`
```js
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
// ... do react stuff
```
`webpack --mode=production` will generate:
```js
/* simplified webpack build */
[function(module, __webpack_exports__, __webpack_require__) {
module.exports = React;
}),
(function(module, __webpack_exports__, __webpack_require__) {
module.exports = ReactRouterDOM;
}),
(function(module, __webpack_exports__, __webpack_require__) {
var react = __webpack_require__(0);
var reactRouterDOM = __webpack_require__(1);
/* ... */
})]
```
```json
{
"app.js": "app.js",
"react.js": "https://unpkg.com/[email protected]/dist/react.min.js",
"react-router-dom.js": "https://unpkg.com/[email protected]/umd/react-router-dom.min.js"
}
```
## API
### DynamicCdnWebpackPlugin(options)
`webpack.config.js`
```js
const DynamicCdnWebpackPlugin = require('dynamic-cdn-webpack-plugin');
module.exports = {
mode: 'production',
plugins: [
new DynamicCdnWebpackPlugin(options)
]
}
```
#### options.disable
Type: `boolean`
Default: `false`
Useful when working offline, will fallback to webpack normal behaviour
#### options.env
Type: `string`
Default: `mode`
Values: `development`, `production`
Determine if it should load the development or the production version of modules
#### options.only
Type: `Array`
Default: `null`
List the only modules that should be served by the cdn
#### options.exclude
Type: `Array`
Default: `[]`
List the modules that will always be bundled (not be served by the cdn)
#### options.verbose
Type: `boolean`
Default: `false`
Log whether the library is being served by the cdn or is bundled
#### options.resolver
Type: `string`, `function`
Default: `'module-to-cdn'`
Allow you to define a custom module resolver, it can either be a `function` or an npm module.
The resolver should return (or resolve as a Promise) either `null` or an `object` with the keys: `name`, `var`, `url`, `version`.
## Related
- [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)
- [module-to-cdn](https://github.com/mastilver/module-to-cdn)
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
Thomas Sileghem
💻 📖 ⚠️
Faizaan
💬 💻 📖
MICHAEL JACKSON
💡
fedeoo
💻
Kevin Malakoff
💻
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
## License
MIT © [Thomas Sileghem](http://mastilver.com)