动态- cdn- webpack- 插件
动态地从Cdn中获取你的依赖性,而不是在你的应用程序中捆绑它们
警告: 这个模块是来自 https://github.com/mastilver/动态-cdn-webpack-plugin (中文(简体) ) 用于支持 Webpack 5.
安装
$ npm install --save-dev dynamic-cdn-webpack-plugin module-to-cdn
与网页包兼容
使用时 webpack --version <= 3 您应该安装以下命令 .
$ npm install --save-dev [email protected] module-to-cdn
使用 HtmlWebpack Plugin 软件
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 将生成:
/* 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>
带有显式胶片的使用
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 将生成:
/* 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 密码
动态CdnWebpack Plugin( 选项)
webpack.config.js
const DynamicCdnWebpackPlugin = require('dynamic-cdn-webpack-plugin');
module.exports = {
mode: 'production',
plugins: [
new DynamicCdnWebpackPlugin(options)
]
}
选项
类型 : boolean
默认 : false
在下线工作时有用,会回落到网络包装正常行为
选项.env
类型 : string
默认 : mode
数值 : development, (中文(简体) ), production
确定是否应该加载模块的开发或制作版本
选项
类型 : Array<string>
默认 : null
列出应该由 cdn 提供的唯一模块
选项
类型 : Array<string>
默认 : []
列出总是捆绑的模块( cdn 无法提供)
选项。动词
类型 : boolean
默认 : false
记录库是否由 cdn 服务或捆绑
选项.resolver
类型 : string, (中文(简体) ), function
默认 : 'module-to-cdn'
允许您定义自定义模块解析器, 它可以是 function 或 npm 模块.
解决者应返回(或以承诺的形式解决) null 或一个 object 带有密钥 : name, (中文(简体) ), var, (中文(简体) ), url, (中文(简体) ), version。 。 。 .
相关
贡献者
感谢这些伟大的人emoji 密钥:
 托马斯·西勒格姆 💻 📖 ⚠️ |
 费赞 💬 💻 📖 |
 迈克尔·杰克逊 💡 |
 联邦 💻 |
 凯文·马拉科夫 💻 |
本项目遵循 全部贡献者 规格。 任何捐款都欢迎!
许可证
麻省理工学院 托马斯·西勒格姆