如何使用 webpack 打包图片？

Question

我正在使用 webpack 模块打包器制作一个 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 文件夹中创建的。这是我的 css，用于在 style.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 文件夹中找到。

谁能告诉我为什么图像没有在资产文件夹中创建，但字体文件在相同 config/loader。

Answer 1

可能与 this

重复

缺少一些加载程序（提取加载程序和 html-加载程序）

否则，如果这些静态资产是直接从 HTML 中包含的，您可以尝试通过此 handy webpack plugin

手动复制这些资产

如何使用 webpack 打包图片？

How to bundle images using webpack?

html

css

webpack

webpack-file-loader