high-cdn-webpack-plugin

Dependencies

305

Maintainers

Versions

Alerts

File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

high-cdn-webpack-plugin

a high availability cdn plugin

1.1.1

latest

npm

Version published: 3 years ago

Weekly downloads: 12; increased by500%

Maintainers: 1

Install size: 1.74 MB

Created: 3 years ago

Weekly downloads

Readme

Source

DEPRECATED

一、插件介绍

high-cdn-webpack-plugin是Webpack一款插件，用来在index.html引用的CDN服务器宕机后自动替换CDN地址，实现CDN高可用的服务状态，需要配合html-webpack-plugin生成的模板html动态注入。

实现效果：

使用前:

使用后：

二、插件使用

1. 安装

npm install high-cdn-webpack-plugin --save

2. 使用

确定模板文件中存在标签，否则插件无法正常找到脚本插入点：

<!DOCTYPE html>
<html lang="en">
<head> <!-- 存在head标签才能使用 -->
    <meta charset="UTF-8">
    <title>hello world</title>
</head>
<body>
   
</body>
</html>

引入插件，并实例化：

// webpack.config.js

const HighCdnWebpackPlugin = require("high-cdn-webpack-plugin");

module.exports = {
  // ... 省略其他配置
  plugins: [
    // ... 省略其他插件
    new HighCdnWebpackPlugin({
      template: 'index.html',
      js: [
        {
          external: {
            'vue': 'Vue'
          },
          path: 'https://cdn.staticfile.org/vue/2.5.16/vue.min.js',
          replacementPath: '/vue/3.0.11/vue.cjs.min.js'
        },
        {
          external: {
            'vue-router': 'VueRouter',
          },
          path: 'https://cdn.staticfile.org/vue-router/3.0.1/vue-router2.min.js',
          replacementPath: '/vue-router/4.0.6/vue-router.cjs.js'
        },
      ],
      css: ['https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.min.css']
  })  
  ]
}

三、Vuejs 使用

// vue.config.js

const HighCdnWebpackPlugin = require("high-cdn-webpack-plugin");
module.exports = {
  // ... 省略其他配置
  configureWebpack: {
    plugins: [
      // ... 省略其他插件
      new HighCdnWebpackPlugin()  
    ]
  }
}

四、其他

Options

属性	类型	必填	说明
template	String	N	打包目录下模板文件名称，默认为index.html
css	Array	N	Css cdn地址，css暂不支持高可用
js	Array	Y	Js文件cdn地址，格式如下方

    {
          external: {   // CDN module export 声明
            'vue': 'Vue'
          },
          path: 'https://cdn.staticfile.org/vue/2.5.16/vue.min.js', // CDN地址
          replacementPath: 'https://cdn.bootcdn.net/ajax/libs/vue/3.0.11/vue.cjs.min.js' // path CDN失效后，将用此个地方的地址代替，一般使用自己服务器上的静态文件地址
    }

License

MIT

FAQs

What is high-cdn-webpack-plugin?

Is high-cdn-webpack-plugin popular?

Is high-cdn-webpack-plugin well maintained?

Last updated on 11 Oct 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install