如何使用 webpack 5 加载相对图像 URL？答案

【问题标题】：How to load a relative image URL with webpack 5?如何使用 webpack 5 加载相对图像 URL？
【发布时间】：2022-12-06 01:02:18
【问题描述】：

我正在使用 webpack 5 并试图让它与 esbuild-loader 和 ES6 模块一起工作。

在代码中，我必须加载图像的 url 以传递给其他第三方库。所以它需要相对于 webpack 捆绑它的任何地方......

以前我有这样的图像加载......

import * as DEFAULT_POSTER_URL = require("../assets/default-poster.png");

看似工作正常，但现在当我将所有内容从 requirejs 转换为 ES6 模块时，我正在尝试像这样加载相同的 URL ...

import * as DEFAULT_POSTER_URL from "../assets/default-poster.png";

但现在我变得不确定了。

我的 webpack.config.js 的规则部分看起来像这样......

  rules: [
    {
      test: /\.(ts|tsx)$/,
      loader: "esbuild-loader",
      options: {
        loader: "tsx",
        target: "es2015"
      },
      exclude: /node_modules/
    },
    {
      test: /\.(s([ac])ss)$/,
      include: [path.resolve(__dirname, "./src/app/assets/sass")],
      use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
    },
    {
      test: /\.(png|svg|jpg|jpeg|gif)$/i,
      type: "asset/resource"
    },
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      type: "asset/resource"
    }
  ]
},

阅读一些文档，我看到还有一个 asset/inline 可以将资产作为 URL 加载，但是当我尝试更改我的图像以像那样加载时，这似乎不起作用。

【问题讨论】：

这回答了你的问题了吗？ Webpack - Require Images Using File-Loader

标签： javascript typescript webpack es6-modules webpack-5

【解决方案1】：

看起来您正在为图像文件使用 type: "asset/resource" 规则，该规则用于指定文件应作为捆绑包的一部分包含在内，但不以任何方式处理。这意味着文件将包含在捆绑包中，但您将无法直接访问它们的 URL。

要解决此问题，您可以使用 file-loader 来处理图像文件并生成可在代码中使用的 URL。您可以像这样将 file-loader 添加到您的 Webpack 配置中：

rules: [
  // Other rules...
  {
    test: /.(png|svg|jpg|jpeg|gif)$/i,
    use: [
      {
        loader: "file-loader",
        options: {
          name: "[name].[ext]",
          outputPath: "assets/images"
        }
      }
    ]
  }
]

这将使用文件加载器来处理您的图像文件并生成您可以在代码中使用的 URL。 URL 将相对于 Webpack 配置中指定的输出目录。

例如，如果你有一张图片在src/app/assets/images/default-poster.png，而你的 Webpack 输出目录是 dist，那么生成的 URL 将是dist/assets/images/default-poster.png

然后您可以在您的代码中使用此 URL，如下所示：

import DEFAULT_POSTER_URL from "../assets/images/default-poster.png";

这应该可以解决问题并允许您在代码中使用图像文件。

【讨论】：

【解决方案2】：

rules: [

// Other rules... { test: /.(png|svg|jpg|jpeg|gif)$/i, use: [ { loader: "file-loader", options: { name: "[name].[ext]", outputPath: "assets/images" } } ] } ]

【讨论】：