Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@talend/dynamic-cdn-webpack-plugin
Advanced tools
Dynamically get your dependencies from a cdn rather than bundling them in your app
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.
$ npm install --save-dev @talend/dynamic-cdn-webpack-plugin @talend/module-to-cdn
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
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>
webpack.config.js
const path = require('path');
const { WebpackManifestPlugin } = 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 WebpackManifestPlugin({
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"
}
webpack.config.js
const DynamicCdnWebpackPlugin = require('@talend/dynamic-cdn-webpack-plugin');
module.exports = {
mode: 'production',
plugins: [new DynamicCdnWebpackPlugin(options)],
};
Type: boolean
Default: false
Useful when working offline, will fallback to webpack normal behaviour
Type: string
Default: mode
Values: development
, production
Determine if it should load the development or the production version of modules
Type: Array<string>
Default: null
List the only modules that should be served by the cdn
Type: Array<string>
Default: []
List the modules that will always be bundled (not be served by the cdn)
Type: string
Default: ERROR
Options: ERROR, INFO, DEBUG
ERROR:
INFO:
DEBUG:
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
.
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.
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!
MIT © Thomas Sileghem
FAQs
Dynamically get your dependencies from a cdn rather than bundling them in your app
The npm package @talend/dynamic-cdn-webpack-plugin receives a total of 407 weekly downloads. As such, @talend/dynamic-cdn-webpack-plugin popularity was classified as not popular.
We found that @talend/dynamic-cdn-webpack-plugin demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.