htmlwebpackglup - webpack 插件HtmlWebpackPlugin配置問題
本文介绍了htmlwebpackglup - webpack 插件HtmlWebpackPlugin配置問題的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
配置代碼
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'www/index.html',
inject: true,
chunks: ['index','manifest','vendor'],
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
插入后代碼,插入后的代碼是絕對路勁,怎麽調整為相對路徑
配置代碼效果
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<link href=/static/css/index.c7b44a78814ecafda35f58784609e1af.css rel=stylesheet>
</head>
<body>
<script type=text/javascript src=/static/js/manifest.fbb49042b23710e35851.js></script>
<script type=text/javascript src=/static/js/vendor.86fada0c2baad29021e8.js></script>
<script type=text/javascript src=/static/js/index.86db0e5c40c094ba920a.js></script>
</body>
</html>
想要的最終效果
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<link href=./static/css/index.c7b44a78814ecafda35f58784609e1af.css rel=stylesheet>
</head>
<body>
<script type=text/javascript src=./static/js/manifest.fbb49042b23710e35851.js></script>
<script type=text/javascript src=./static/js/vendor.86fada0c2baad29021e8.js></script>
<script type=text/javascript src=./static/js/index.86db0e5c40c094ba920a.js></script>
</body>
</html>
解决方案
publicPath 默认是 '/'
把publicPath改成 './' 就行了
这篇关于htmlwebpackglup - webpack 插件HtmlWebpackPlugin配置問題的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文