• Stars
    star
    342
  • Rank 123,697 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Get your dependencies from a cdn rather than bundling them in your app

dynamic-cdn-webpack-plugin

npm Build Status codecov David XO code style

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

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

import React from 'react';
import { BrowserRouter } from 'react-router-dom';

// ... do react stuff

webpack --mode=production will generate:

/* 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);

    /* ... */
})]
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/react.min.js"></script><script type="text/javascript" src="https://unpkg.com/[email protected]/umd/react-router-dom.min.js"></script><script src="build/app.js"></script></body>
</html>

Usage with ManifestPlugin

webpack.config.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

import React from 'react';
import { BrowserRouter } from 'react-router-dom';

// ... do react stuff

webpack --mode=production will generate:

/* 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);

    /* ... */
})]
{
    "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

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<string> Default: null

List the only modules that should be served by the cdn

options.exclude

Type: Array<string> 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

Contributors

Thanks goes to these wonderful people (emoji key):

Thomas Sileghem
Thomas Sileghem

πŸ’» πŸ“– ⚠️
​Faizaan
​Faizaan

πŸ’¬ πŸ’» πŸ“–
MICHAEL JACKSON
MICHAEL JACKSON

πŸ’‘
fedeoo
fedeoo

πŸ’»
Kevin Malakoff
Kevin Malakoff

πŸ’»

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT Β© Thomas Sileghem

More Repositories

1

module-to-cdn

JavaScript
45
star
2

express-annotation

Bring annotation routing to express
JavaScript
25
star
3

node-annotation-parser

a easy to use annotation parser for JavaScript
JavaScript
8
star
4

continuous-delivery-terraform-kubernetes

HCL
7
star
5

lawson

Database agnostic ODM
JavaScript
4
star
6

apex-bin

Binary wrapper for apex
JavaScript
4
star
7

decorator-router

framework agnostic router using es7 decorators
JavaScript
3
star
8

node-annotation-router

Bring annotations to your favorite routing framework
JavaScript
3
star
9

gitTorrent-ui

Ui for gittorrent
JavaScript
3
star
10

sails-hook-parametized-policies

JavaScript
3
star
11

babel-preset-when

JavaScript
3
star
12

op-return-blockchain-list

List of op_return found in the blockchain
JavaScript
2
star
13

sails-hook-annotation-router

sails hook which add annotation routing to controllers
JavaScript
2
star
14

1broker-positions-analyser

Get a summary of your daily profit / loss on 1broker.com
JavaScript
2
star
15

octoscripts-scripts

scripts run by octoscripts.com
JavaScript
1
star
16

db-schema-validator

Object model validation
JavaScript
1
star
17

nosqwal

NoSQL Database interface
JavaScript
1
star
18

geth-bin

Binary wrapper for geth
JavaScript
1
star
19

nosqwal-orientdb

Nosqwal adapter for Orientdb
JavaScript
1
star
20

elasticsearch-bin

Binary wrapper for ElasticSearch - A search server based on Lucene https://www.elastic.co/products/elasticsearch
JavaScript
1
star
21

node-kickass.to

JavaScript
1
star
22

umds

JavaScript
1
star
23

tessek

a modular bitcoin trading bot
JavaScript
1
star
24

json7

JavaScript
1
star
25

generator-bin-wrapper

Generate a binary wrapper around your programs using bin-wrapper
JavaScript
1
star