cdn-html-webpack-plugin
v1.0.0
Published
cdn html webpack plugin
Downloads
4
Maintainers
denghui1010Readme
cdn-html-webpack-plugin
功能
使生成的index.html文件使用cdn的域名地址来加载资源
tips
本插件依赖于 html-webpack-plugin
使用
1. 绝对路径模式，此模式下，index.html文件中的所有相对路径将被替换为配置的绝对路径
const CdnHtmlWebpackPlugin = require("cdn-html-webpack-plugin");
new HtmlWebpackPlugin({
cdn: {
cdnpath: "http://cdnhost"
}
}),
new CdnHtmlWebpackPlugin()in
<!DOCTYPE html>
<html>
<head>
<link href=./static/css/app.a55284ea60abd800fe5c0239b78ec1d4.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js> </script>
</body>
</html>out
<!DOCTYPE html>
<html>
<head>
<link href=http://cdnhost/static/css/app.a55284ea60abd800fe5c0239b78ec1d4.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript src=http://cdnhost/static/js/manifest.3ad1d5771e9b13dbdad2.js> </script>
</body>
</html>2. base模式，此模式下，将在index.html的head中增加一个base标签，浏览器随后将使用配置的基本url来解析所有的相对url
const CdnHtmlWebpackPlugin = require("cdn-html-webpack-plugin");
new HtmlWebpackPlugin({
cdn: {
cdnbase: "http://cdnhost"
}
}),
new CdnHtmlWebpackPlugin()in
<!DOCTYPE html>
<html>
<head>
<link href=./static/css/app.a55284ea60abd800fe5c0239b78ec1d4.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js> </script>
</body>
</html>out
<!DOCTYPE html>
<html>
<head>
<base src="http://cdnhost"> </base>
<link href=./static/css/app.a55284ea60abd800fe5c0239b78ec1d4.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js> </script>
</body>
</html>