webpack-dynamic-import-cdn-plugin

support webpack5

usage

1import { DynamicImportCdnPlugin } from "webpack-dynamic-import-cdn-plugin"; 
2new DynamicImportCdnPlugin({
3  urlPrefix: 'https://unpkg.com',
4  // split: '', // default @
5  // noRoot: false
6  css: {
7    "iview/dist/styles/iview.css": "/iview@3.5.4/dist/styles/iview.css"
8    //"iview/dist/styles/iview.css": { url: "/iview@3.5.4/dist/styles/iview.css", urlPrefix: 'https://unpkg.com' }
9
10  }, 
11  js: {
12    vue: {
13      moduleName: "Vue",
14      url: "/vue@2.6.10/dist/vue.min.js",
15      urlPrefix: '',
16      // deprecated
17      // noUrlPrefix: true
18    },
19    'vue-router': {
20      moduleName: 'VueRouter',
21      package: 'vue-router',
22      version: '3.0.2',
23      root: '/dist',
24      url: '/vue-router.min.js',
25    },
26  }
27}); 

css depend on pkg mini-css-extract-plugin

css 需要依赖 mini-css-extract-plugin 插件，(webpack4仅在build模式生效)

不同cdn格式不同， 例如：
https://www.jsdelivr.com
https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js

https://cdnjs.com
https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js

1import { DynamicImportCdnPlugin } from "webpack-dynamic-import-cdn-plugin"; 
2new DynamicImportCdnPlugin({
3  urlPrefix: 'https://cdn.jsdelivr.net',
4  js: {
5    vue: {
6      moduleName: "Vue",
7      package: 'vue',
8      version: '2.6.10',
9      root: '/dist',
10      url: "/vue.min.js",
11    },
12  }
13});
14
15切换到cdnjs.com =>
16
17new DynamicImportCdnPlugin({
18  urlPrefix: 'https://cdnjs.cloudflare.com',
19  split: '/',
20  noRoot: true
21  js: {
22    vue: {
23      moduleName: "Vue",
24      package: 'vue',
25      version: '2.6.10',
26      root: '/dist',
27      url: "/vue.min.js",
28    },
29  }
30});