webpack 如何处理图片？

Question

如果无法捆绑图片，那么这些图片会去哪里呢？您需要像Gulp一样的另一个进程来将图片复制到特定目录吗？

- Shai UI

---

“图片应该放在哪里？”这取决于配置，您可以将它们嵌入或外部存储。如果有很多大型图片，嵌入它们可能并不是最好的选择。 - Keith

建议阅读 :) https://blog.andrewray.me/webpack-when-to-use-and-why/ - Andy Ray

Answer 1

在您的webpack配置中，您需要添加一个用于file-loader的规则，如下所示：

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

您可以从这里安装file-loader。

- Razvan Sandu

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: '/'
            }
          }
        ]
      }

最后，我想推荐使用图片标签和为不同的屏幕尺寸使用不同大小的图像，这将根据设备提高您的加载时间和用户体验。

<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>

- Jason Allshorn