I am using webpack 5 and trying to get it to work with esbuild-loader and ES6 modules.

In the code, I have to load an image's url to pass to some other third-party library. So it needs to be relative to wherever webpack bundles it...

Previously I had an image loading like this...

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

Seemingly working fine, but now when I converted everything from requirejs to ES6 modules, I am trying to load the same URL like this...

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

But now I'm getting undefined.

The rules section of my webpack.config.js looks like this...

  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"
    }
  ]
},

Reading the documentation some, I see there is also a asset/inline to load an asset as a URL, but that didn't seem to work when I tried changing my images to load like that.

CodePudding user response：

It looks like you are using the type: "asset/resource" rule for your image files, which is used to specify that the files should be included as part of the bundle, but not processed in any way. This means that the files will be included in the bundle, but you won't be able to access their URLs directly.

To fix this, you can use the file-loader to process your image files and generate URLs that you can use in your code. You can add the file-loader to your Webpack configuration like this:

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

This will use the file-loader to process your image files and generate URLs that you can use in your code. The URLs will be relative to the output directory specified in your Webpack configuration.

For example, if you have an image at src/app/assets/images/default-poster.png, and your Webpack output directory is dist, the generated URL will be dist/assets/images/default-poster.png

You can then use this URL in your code like this:

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

This should fix the issue and allow you to use your image files in your code.

CodePudding user response：

rules: [

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