我正在使用webpack模块打包器开发一个Angular2应用程序。我已经添加了file-loader来加载图片文件,例如jpg、gif、png等。但是当我运行构建命令时,这些图片文件并没有被打包。以下是我的配置文件:
webpack.config.js (仅图片加载器配置)
我已经将文件夹中的图片包含在我的HTML模板中,如下所示:
在我的 CSS 中也有:
但是当我构建整个应用程序时,图像并没有放置在我在webpack配置中指定的资产文件夹中。
现在最奇怪的事情是,字体使用相同的配置,并且它们被创建在资产文件夹内。这是我在style.css中包含字体的CSS:
这个字体的所有文件,如svg、ttf、woff等,在构建后可以在assets文件夹中找到。请问为什么使用相同的配置/加载器时,图像没有被创建到资产文件夹中,但字体文件却有?
{
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配置中指定的资产文件夹中。
现在最奇怪的事情是,字体使用相同的配置,并且它们被创建在资产文件夹内。这是我在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;
}
这个字体的所有文件,如svg、ttf、woff等,在构建后可以在assets文件夹中找到。请问为什么使用相同的配置/加载器时,图像没有被创建到资产文件夹中,但字体文件却有?