🇨🇳中文 | 🇬🇧English
Make the generated index.html file use the cdn host to load resources.
This plugin depends on html-webpack-plugin
npm install cdn-html-webpack-plugin --save-dev1. Absolute path mode. All relative paths in the index.html file will be replaced with the configured absolute path.
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 tag mode. A <base> tag will be injected on the top of the <head> tag in the index.html file. Then the browser will use the configured path to resolve all relative paths.
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>