mastilver / Dynamic Cdn Webpack Plugin
Licence: mit
Get your dependencies from a cdn rather than bundling them in your app
Stars: ✭ 312
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Dynamic Cdn Webpack Plugin
Webpack Cdn Plugin
A webpack plugin that use externals of CDN urls for production and local node_modules for development
Stars: ✭ 306 (-1.92%)
Mutual labels: webpack, cdn
Cloudflare Typescript Workers
Types and mocks for building a tested Typescript Cloudflare Worker, generates three NPM packages
Stars: ✭ 94 (-69.87%)
Mutual labels: webpack, cdn
Docker Nginx Image Proxy
on the fly image cropping with gravity, resize and compression microservice
Stars: ✭ 79 (-74.68%)
Mutual labels: cdn, dynamic
Lazy Compile Webpack Plugin
Boost webpack startup time by lazily compiling dynamic imports
Stars: ✭ 106 (-66.03%)
Mutual labels: webpack, dynamic
React Starter Kit
React Starter Kit — front-end starter kit using React, Relay, GraphQL, and JAM stack architecture
Stars: ✭ 21,060 (+6650%)
Mutual labels: webpack, cdn
Webpack Require From
Webpack plugin that allows to configure path or URL for fetching dynamic imports
Stars: ✭ 142 (-54.49%)
Mutual labels: webpack, dynamic
Vue Project
基于vue-cli构建的财务后台管理系统(vue2+vuex+axios+vue-router+element-ui+echarts+websocket+vue-i18n)
Stars: ✭ 301 (-3.53%)
Mutual labels: webpack
Statically
⚡️ The best free and fast CDN for images, CSS, JavaScript, and open source.
Stars: ✭ 299 (-4.17%)
Mutual labels: cdn
Webpack Sentry Plugin
Webpack plugin to upload source maps to Sentry
Stars: ✭ 299 (-4.17%)
Mutual labels: webpack
Generator Webappstarter
Quick start a web app for mobile.Automatically adjusts according to a device’s screen size without any extra work.
Stars: ✭ 298 (-4.49%)
Mutual labels: webpack
Kratos Boilerplate
🔥 A simple boilerplate for creating statics PWA using Webpack, Pug, PostCSS and CSS Modules
Stars: ✭ 308 (-1.28%)
Mutual labels: webpack
React Redux Boilerplate
Awesome React Redux Workflow Boilerplate with Webpack 4
Stars: ✭ 307 (-1.6%)
Mutual labels: webpack
Umi Admin
基于蚂蚁金服 umi 可插拔的企业级 react 应用框架开发的 Admin。最核心特点：对后端开发人员友好
Stars: ✭ 310 (-0.64%)
Mutual labels: webpack
React Bolt
⚡ The most simple & robust boilerplate for your React projects.
Stars: ✭ 298 (-4.49%)
Mutual labels: webpack
React Starter
Starter kit for creating universal React applications.
Stars: ✭ 306 (-1.92%)
Mutual labels: webpack
Laravel Attributes
Rinvex Attributable is a robust, intelligent, and integrated Entity-Attribute-Value model (EAV) implementation for Laravel Eloquent, with powerful underlying for managing entity attributes implicitly as relations with ease. It utilizes the power of Laravel Eloquent, with smooth and seamless integration.
Stars: ✭ 304 (-2.56%)
Mutual labels: dynamic
dynamic-cdn-webpack-plugin
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 💻 📖 ⚠️ |
 Faizaan 💬 💻 📖 |
 MICHAEL JACKSON 💡 |
 fedeoo 💻 |
|---|
This project follows the all-contributors specification. Contributions of any kind welcome!
License
MIT © Thomas Sileghem
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].