Skip to content

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

License

Notifications You must be signed in to change notification settings

mastilver/dynamic-cdn-webpack-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

5910d47 · Jun 13, 2023

History

87 Commits
Jun 13, 2023
Jun 13, 2023
Jun 13, 2023
Jun 13, 2023
Apr 9, 2017
Apr 9, 2017
Jun 13, 2023
Jun 13, 2023
Apr 9, 2017
Jul 26, 2017
Jun 13, 2023
Apr 9, 2017
Jun 13, 2023
Jun 13, 2023
Jun 13, 2023

Repository files navigation

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