webpack HtmlWebpackPlugin配置
const htmlWebpackPlugin = new HtmlWebpackPlugin({
inject: false,
template: resolveApp('./src/page/index.html'),
favicon: resolveApp('./src/assets/favicon.png'),
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
minifyHTML: true
}
});
html 模板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
<% } %>
</head>
<body>
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>
</body>
</html>
其中CSS代码遍历
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
<% } %>
最后得到结果是
<link rel="icon" type="image/png" href="/favicon.png">
<link href="[object Object]" rel="stylesheet">
动态的样式表变成Object怎么解决?
你可以试试把这个object打印出来看看是什么
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%=JSON.stringify(htmlWebpackPlugin.files.css[css]) %>" rel="stylesheet">
<% } %>