webpack-dynamic-import-cdn-plugin

support webpack5

usage

import { DynamicImportCdnPlugin } from "webpack-dynamic-import-cdn-plugin"; 
new DynamicImportCdnPlugin({
  urlPrefix: 'https://unpkg.com',
  // split: '', // default @
  // noRoot: false
  css: {
    "iview/dist/styles/iview.css": "/[email protected]/dist/styles/iview.css"
    //"iview/dist/styles/iview.css": { url: "/[email protected]/dist/styles/iview.css", urlPrefix: 'https://unpkg.com' }

  }, 
  js: {
    vue: {
      moduleName: "Vue",
      url: "/[email protected]/dist/vue.min.js",
      urlPrefix: '',
      // deprecated
      // noUrlPrefix: true
    },
    'vue-router': {
      moduleName: 'VueRouter',
      package: 'vue-router',
      version: '3.0.2',
      root: '/dist',
      url: '/vue-router.min.js',
    },
  }
}); 

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/[email protected]/dist/vue.min.js

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

import { DynamicImportCdnPlugin } from "webpack-dynamic-import-cdn-plugin"; 
new DynamicImportCdnPlugin({
  urlPrefix: 'https://cdn.jsdelivr.net',
  js: {
    vue: {
      moduleName: "Vue",
      package: 'vue',
      version: '2.6.10',
      root: '/dist',
      url: "/vue.min.js",
    },
  }
});

切换到cdnjs.com =>

new DynamicImportCdnPlugin({
  urlPrefix: 'https://cdnjs.cloudflare.com',
  split: '/',
  noRoot: true
  js: {
    vue: {
      moduleName: "Vue",
      package: 'vue',
      version: '2.6.10',
      root: '/dist',
      url: "/vue.min.js",
    },
  }
});