在我的Angular 5项目中，我的 index.html 显示带有背景图像的加载消息：
<html>
<head>
<base href="/" />
<style type="text/css">
#loadingIndicator {
background-image: url('style/Loading.png');
}
</style>
</head>
<body>
<root-component>
<div id="loadingIndicator">
<p>Loading...
</div>
</root-component>
</body>
</html>
我的 .angular-cli.json 文件将此图像包含为资产：
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
// ...
"apps": [
{
"assets": [
"assets",
"favicon.ico",
"style/Loading.png"
]
}
]
}
我还在我的主 style.css 中引用了 style/Loading.png 图像以获取其他Angular组件 .
当我执行 ng build --prod 时，我的 dist 目录如下所示：
/index.html
/Loading.9af4172f5a20c0475770.png
/favicon.ico
/style/Loading.png
/styles.2g4fa4ee39253c42123b.bundle.css
/etc...
请注意 Loading.png 如何包含两次：as Loading.9af4172f5a20c0475770.png 和 /style/Loading.png .
有没有办法让 ng build 或 webpack 更改我的内联CSS以引用资产的散列文件名，因此它不包括文件两次 - 并导致我的用户下载文件两次：
#loadingIndicator {
background-image: url('Loading.9af4172f5a20c0475770.png');
}
或者它至少可以将图像完全内联为 data: URI？ （这对于Angular加载页面是有意义的，因为应用程序可能在图像的第二个HTTP请求完成之前加载了） .
我在网上找不到 webpack 的任何信息，也没有找到Angular，但是我找到了Vue.js的这个页面：https://vuejs-templates.github.io/webpack/static.html，它只涵盖从JavaScript获取资产路径，而不是重写静态HTML .
1 回答
没有看到你的Webpack配置很难协助，但看看HtmlWebpackPlugin . 默认情况下，插件从头开始生成一个包含所有必要包含的HTML文件;但是，您可以将其配置为将HTML文件作为模板加载 .