# @effortlessmotion/dynamic-cdn-webpack-plugin 中文文档
规范地址：https://npmcn.com/package/%40effortlessmotion/dynamic-cdn-webpack-plugin/
版本：5\.0\.1
npm 元数据更新时间：2022-04-05T06:50:44.392Z
中文译文更新时间：2026-11-13T08:39:07.095Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40effortlessmotion/dynamic-cdn-webpack-plugin
原文对照：https://npmcn.com/package/%40effortlessmotion/dynamic-cdn-webpack-plugin/?lang=original
项目主页：https://github.com/mastilver/dynamic-cdn-webpack-plugin#readme
源码仓库：https://github.com/mastilver/dynamic-cdn-webpack-plugin
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：16.1 kB，6 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>=10\.13\.0
- 运行依赖：3 个
- peer 依赖：webpack \>=5
- 首次发布：2021-07-04T02:41:55.181Z
- 最新版本发布：2021-07-04T05:22:56.706Z
- 近 30 天下载量：12763（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 0 个）
## 中文简介
动态地从Cdn中获取你的依赖性,而不是在你的应用程序中捆绑它们
## 安装
```sh
npm install @effortlessmotion/dynamic-cdn-webpack-plugin
```
也可以使用：`pnpm add @effortlessmotion/dynamic-cdn-webpack-plugin`、`yarn add @effortlessmotion/dynamic-cdn-webpack-plugin`、`bun add @effortlessmotion/dynamic-cdn-webpack-plugin`
## README
# 动态- cdn- webpack- 插件
[](https://www.npmjs.com/package/dynamic-cdn-webpack-plugin) [](https://travis-ci.org/mastilver/dynamic-cdn-webpack-plugin) [](https://codecov.io/gh/mastilver/dynamic-cdn-webpack-plugin?branch=master) [](https://david-dm.org/mastilver/dynamic-cdn-webpack-plugin) [](https://github.com/sindresorhus/xo)
> 动态地从Cdn中获取你的依赖性,而不是在你的应用程序中捆绑它们
警告: 这个模块是来自 [https://github.com/mastilver/动态-cdn-webpack-plugin (中文(简体) )](https://github.com/mastilver/dynamic-cdn-webpack-plugin) 用于支持 Webpack 5.
## 安装
```
$ npm install --save-dev dynamic-cdn-webpack-plugin module-to-cdn
```
## 与网页包兼容
使用时 `webpack --version <= 3` 您应该安装以下命令 .
```
$ npm install --save-dev dynamic-cdn-webpack-plugin@3.4.1 module-to-cdn
```
## 使用 HtmlWebpack Plugin 软件
`webpack.config.js`
```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`
```js
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
// ... do react stuff
```
`webpack --mode=production` 将生成:
```js
/* 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);
/* ... */
})]
```
```html
Webpack App
```
## 带有显式胶片的使用
`webpack.config.js`
```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`
```js
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
// ... do react stuff
```
`webpack --mode=production` 将生成:
```js
/* 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);
/* ... */
})]
```
```json
{
"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 密码
### 动态CdnWebpack Plugin( 选项)
`webpack.config.js`
```js
const DynamicCdnWebpackPlugin = require('dynamic-cdn-webpack-plugin');
module.exports = {
mode: 'production',
plugins: [
new DynamicCdnWebpackPlugin(options)
]
}
```
#### 选项
类型 : `boolean`
默认 : `false`
在下线工作时有用,会回落到网络包装正常行为
#### 选项.env
类型 : `string`
默认 : `mode`
数值 : `development`, (中文(简体) ), `production`
确定是否应该加载模块的开发或制作版本
#### 选项
类型 : `Array` 默认 : `null`
列出应该由 cdn 提供的唯一模块
#### 选项
类型 : `Array` 默认 : `[]`
列出总是捆绑的模块( cdn 无法提供)
#### 选项。动词
类型 : `boolean`
默认 : `false`
记录库是否由 cdn 服务或捆绑
#### 选项.resolver
类型 : `string`, (中文(简体) ), `function`
默认 : `'module-to-cdn'`
允许您定义自定义模块解析器, 它可以是 `function` 或 npm 模块. 解决者应返回(或以承诺的形式解决) `null` 或一个 `object` 带有密钥 : `name`, (中文(简体) ), `var`, (中文(简体) ), `url`, (中文(简体) ), `version`。 。 。 .
## 相关
- [html-webpack-插件](https://github.com/jantimon/html-webpack-plugin)
- [模块到cdn](https://github.com/mastilver/module-to-cdn)
## 贡献者
感谢这些伟大的人[emoji 密钥](https://github.com/kentcdodds/all-contributors#emoji-key):
本项目遵循 [全部贡献者](https://github.com/kentcdodds/all-contributors) 规格。 任何捐款都欢迎!
## 许可证
麻省理工学院 [托马斯·西勒格姆](http://mastilver.com/)
## 常见问题
### @effortlessmotion/dynamic-cdn-webpack-plugin 是什么？
动态地从Cdn中获取你的依赖性,而不是在你的应用程序中捆绑它们
### 如何安装 @effortlessmotion/dynamic-cdn-webpack-plugin？
在项目目录运行 npm install @effortlessmotion/dynamic-cdn-webpack-plugin，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：webpack（\>=5）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @effortlessmotion/dynamic-cdn-webpack-plugin 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/effortlessmotion\_\_dynamic-cdn-webpack-plugin 是否存在。
### @effortlessmotion/dynamic-cdn-webpack-plugin 支持 ESM 还是 CommonJS？
以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。
### @effortlessmotion/dynamic-cdn-webpack-plugin 需要什么版本的 Node\.js？
package\.json 的 engines 字段要求 Node\.js \>=10\.13\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。
### @effortlessmotion/dynamic-cdn-webpack-plugin 可以商用吗？
@effortlessmotion/dynamic-cdn-webpack-plugin 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @effortlessmotion/dynamic-cdn-webpack-plugin 的下载量有多少？
根据 npm 官方下载统计，@effortlessmotion/dynamic-cdn-webpack-plugin 在 2026/10/13 – 2026/11/11 这 30 天内被下载 12,763 次，日均约 425 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @effortlessmotion/dynamic-cdn-webpack-plugin 还在维护吗？
最新版本 5\.0\.1 发布于 2021/07/04（5 年前）；至今共发布 2 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/07/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。
