@talend/dynamic-cdn-webpack-plugin

    9.7.9 • Public • Published

    dynamic-cdn-webpack-plugin

    NPM

    Dynamically get your dependencies from a cdn rather than bundling them in your app

    Warning: This module is a fork from https://github.com/mastilver/dynamic-cdn-webpack-plugin. We start to fork after month without update and because we need to ship our libs and project over CDN leverage UMD builds.

    The underlying module-to-cdn for the same reason has also been forked https://npmjs.org/package/@talend/module-to-cdn.

    Install

    $ npm install --save-dev @talend/dynamic-cdn-webpack-plugin @talend/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 dynamic-cdn-webpack-plugin@3.4.1 module-to-cdn
    

    Usage with HtmlWebpackPlugin

    webpack.config.js

    const path = require('path');
    
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const DynamicCdnWebpackPlugin = require('@talend/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/react@15.5.3/dist/react.min.js"></script><script type="text/javascript" src="https://unpkg.com/react-router-dom@4.1.1/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('@talend/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/react@15.5.3/dist/react.min.js",
        "react-router-dom.js": "https://unpkg.com/react-router-dom@4.1.1/umd/react-router-dom.min.js"
    }

    API

    DynamicCdnWebpackPlugin(options)

    webpack.config.js

    const DynamicCdnWebpackPlugin = require('@talend/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.loglevel

    Type: string
    Default: ERROR Options: ERROR, INFO, DEBUG

    ERROR:

    • module XX could not be loaded because peerDependency YY is not loaded

    INFO:

    • module XX already loaded in another version

    DEBUG:

    options.resolver

    Type: string, function
    Default: '@talend/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.

    options.addURL

    Type: function

    This function should be aligned with the resolver to support dependencies manifest. It take builted info from it and add cdn url to the info structure to have align values.

    Related

    Contributors

    Thanks goes to these wonderful people (emoji key):


    Thomas Sileghem

    💻 📖 ⚠️

    ​Faizaan

    💬 💻 📖

    MICHAEL JACKSON

    💡

    fedeoo

    💻

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

    License

    MIT © Thomas Sileghem

    Install

    npm i @talend/dynamic-cdn-webpack-plugin

    DownloadsWeekly Downloads

    855

    Version

    9.7.9

    License

    MIT

    Unpacked Size

    33.7 kB

    Total Files

    10

    Last publish

    Collaborators

    • talend-frontend