Question

如果无法捆绑图片，图片会去哪里？除了webpack之外，你还需要另一个进程来将图像复制到某个目录（如Gulp）

Answer 1

在您的webpack配置中，您需要为文件加载器添加规则，如下所示：

module: {
  rules: [
    {test: /\.svg|\.png|\.jpg$/, use: ['file-loader']},
  ]
}

您可以从here

安装文件加载器

Answer 2

在许多情况下需要导入图像。例如，您可以在app.js的顶部执行

import '../../../css/bb_client_flow.png';

然后在您的代码中包含引用资源文件夹中图像的标记。

<img src="/assets/bb_client_flow.png" className="auth-flow"/>

这会自动将您的图像放入资源文件夹。如果您在webpack配置中使用加载程序，以及类似的东西。

{
        test: /\.(png|jpg|gif|json|xml|ico|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'assets/',
              publicPath: '/'
            }
          }
        ]
      }

最后，我想建议使用图片标记和different screen sizes使用不同大小的图像，因为这将根据设备改善您的加载时间和UX。

<figure>
    <picture>
    <source media="(min-width: 750px)"
            srcset="images/horses-1600_large_2x.jpg 2x,
                    images/horses-800_large_1x.jpg" />
    <source media="(min-width: 500px)"
            srcset="images/horses_medium.jpg" />
    <img src="images/horses_small.jpg" alt="Horses in Hawaii">
    </picture>
    <figcaption>Horses in Hawaii</figcaption>
</figure>

webpack如何处理图像？

2 个答案: