首页 文章

如何使用webpack捆绑图像？

提问于
浏览 次
4

我正在使用webpack模块捆绑器制作angular2应用程序 . 现在我添加了文件加载器来加载图像文件，如jpg，gif，png等 . 但是当我运行build命令时，图像文件没有被捆绑 . 这是我的配置：

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文件夹中创建的 . 这是我在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;
 }

在运行构建之后，可以在assets文件夹中找到此字体的所有文件，如svgs，ttf，woff等 .

任何人都可以告诉我为什么图像不是在资源文件夹中创建但是字体文件是使用相同的配置/加载器创建的 .

html css webpack webpack-file-loader

1 回答

  • 2

    可能是this的副本

    缺少一些加载器（extract-loader和html-loader）

    否则，如果这些静态资产直接包含在HTML中，您可以尝试通过此方法手动复制这些资产handy webpack plugin

    回复于

相关问题