Webpack Plugins

dynamic-cdn-webpack-plugin v 5.0.0

动态地从 CDN 中获取依赖，而非将其捆绑在应用中。

安装

npm install --save-dev dynamic-cdn-webpack-plugin module-to-cdn
1

兼容性

如果您正在使用的webpack 版本小于 3，那么您应当按照以下方式安装。

npm install --save-dev dynamic-cdn-webpack-plugin@3.4.1 module-to-cdn
1

搭配HTMLWebpackPlugin

以 React 为例

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()
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

React 的 app.js

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
1
2

此时，webpack --mode=production将会产生:

[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);

    /* ... */
})]
1
2
3
4
5
6
7
8
9
10
11
12
<!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>
1
2
3
4
5
6
7
8
9

搭配 ManifestPlugin

以 React 为例

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()
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

app.js

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
1
2

webpack --mode=production 将生成：

[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);

    /* ... */
})]
1
2
3
4
5
6
7
8
9
10
11
12
{
    "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"
}
1
2
3
4
5

API

DynamicCdnWebpackPlugin(options)

webpack.config.js

const DynamicCdnWebpackPlugin = require('dynamic-cdn-webpack-plugin');

module.exports = {
    mode: 'production',
    plugins: [
        new DynamicCdnWebpackPlugin(options)
    ]
}
1
2
3
4
5
6
7
8
options属性名 类型 默认值 描述
disable boolean false 在离线工作时很有用，将退回到 webpack 的正常行为
env string mode 值可以是：development/production。决定应该加载的模块是开发版本还是生产版本。
only Array<string> null 列出 CDN 应该提供的唯一模块
exclude Array<string> [] 列出将始终绑定的模块(非 CDN 提供)
verbose boolean false 记录库是否由 CDN 提供或已经打包
resolver string | function module-to-cdn 允许您自定义模块解析器，可以是一个函数也可以是一个 npm 模块。解析器应该返回(或返回 Promise) 或带有关键字: name、var、url、version

← circular-dependency-plugin →