install

1  npm i --save-dev add-asset-html-cdn-webpack-plugin

Usage

base on html-webpack-plugin dynamic injection of cdn data to html template

cdn.config.js

1module.exports = {
2  vue: '//cdn.bootcss.com/vue/2.5.16/vue.min.js',
3  vueRouter: '//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js',
4  axios: '//cdn.bootcss.com/axios/0.18.0/axios.min.js',
5  rxjs: '//cdn.bootcss.com/rxjs/5.5.6/Rx.min.js',
6  'element-ui': '//cdn.bootcss.com/element-ui/2.3.7/index.js',
7  theme: '//cdn.bootcss.com/element-ui/2.3.7/theme-chalk/index.css'
8  app: {
9    script: '//google/index.js',
10    style: '//google/index.css'
11  },
12  login: {
13    script: '//google/index.js',
14    style: '//google/index.css'
15  }
16};

If the key value is a simple type, it will be used as a generic insert template, otherwise objects such as app(HtmlWebpackPlugin config chunks) will only insert in the corresponding template.

webpack.config.js

1const path = require('path');
2const HtmlWebpackPlugin = require('html-webpack-plugin');
3const AddAssetHtmlCdnWebpackPlugin = require('../index');
4const cdnConfig = require('./cdn.config');
5
6module.exports = {
7  mode: 'production',
8  entry: { index: path.resolve(__dirname, '../src/index.js') },
9  output: {
10    path: path.resolve(__dirname, '../dist'),
11    filename: '[name].js'
12  },
13  plugins: [
14    new HtmlWebpackPlugin({
15      inject: true,
16      template: path.resolve(__dirname, '../src/index.html')
17    }),
18    new AddAssetHtmlCdnWebpackPlugin(true, cdnConfig)
19  ]
20};

Options

Name	Type	Default	Description
isWork	{Boolean}	true	does the plugin work
options	{Object}	{}	Key-value pair object like cdn.config.js