Webpack plugin for injecting cdn script/link tag in your html.
install html-webpack-plugin
and html-webpack-autocdn-plugin
npm i -D html-webpack-plugin html-webpack-autocdn-plugin
Then,
// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackAutoCdnPlugin = require("html-webpack-autocdn-plugin");
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
template: ab("./index.html"),
inject: "body",
}),
new HtmlWebpackAutoCdnPlugin({
dependencies: {
externals: {
vue: "vue",
},
transform(name, version, mode) {
const isDev = mode === "development";
const dependency = `${name}@${version}${isDev ? "" : ".min"}.js`;
return {
js: `https://unpkg.com/${dependency}.js`,
css: `https://unpkg.com/${dependency}.css`,
};
},
},
js: ["https://unpkg.com/vue-router@4"],
}),
],
});
Then, It will do two work:
- Add externals to webpack option.
- Generate script/link tag in html.
-
externals
: Just like webpack externals option. Properly, likeExternalItem
. It cannot be array. Its value will be merged into webpack externals. -
transform
: transform function for generate cdn url dynamic. It has three parameters:-
name
: dependency name. -
version
: dependency version in your package.json. Maybe undefined. -
mode
: webpack mode option.
-
This filed is an array. The type of its element is object
or string
.
- if
string
: load this url directly. - if
object
, It has two properties.-
dev
: only whenmode === 'development'
, load this url. -
prod
: only whenmode !== 'development'
, load this ulr.
-