我正在使用 webpack 模块 bundler 制作一个 angular2 应用程序。现在我已经添加了文件加载器来加载图像文件,如 jpg、gif、png 等。但是当我运行构建命令时,图像文件没有被捆绑。这是我的配置:
webpack.config.js (仅图像加载器配置)
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=.+)?$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
我在我的 html 模板中包含了一个文件夹中的图像,如下所示:
<img src="/asset/img/myImg.png"/>
也在我的CSS中:
#myBackground {
background: background: #344556 url(/assets/img/background.jpg) center/cover;
}
但是当我构建整个应用程序时,图像并没有像我在 webpack 配置中指定的那样放置在 Assets 文件夹中。
现在最奇怪的是字体使用了相同的配置,并且它们是在 assets 文件夹中创建的。这是我在 style.css 中包含字体的 css:
@font-face {
font-family: 'robotolight';
src: url("../fonts/roboto-light-webfont.eot");
src: url("../fonts/roboto-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-light-webfont.woff2") format("woff2"), url("../fonts/roboto-light-webfont.woff") format("woff"), url("../fonts/roboto-light-webfont.ttf") format("truetype"), url("../fonts/roboto-light-webfont.svg#robotolight") format("svg");
font-weight: normal;
font-style: normal;
}
此字体的所有文件,如 svgs、ttf、woff 等都可以在运行构建后在 assets 文件夹中找到。
谁能告诉我为什么没有在 Assets 文件夹中创建图像,而是使用相同的配置/加载器创建字体文件。
最佳答案
可能是 this 的副本
缺少一些加载器(extract-loader 和 html-loader)
否则,如果这些静态 Assets 直接包含在 HTML 中,您可以尝试通过此 handy webpack plugin 手动复制这些 Assets
关于html - 如何使用 webpack 打包图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41544777/