I am writing a moodle activity plugin that uses javascript. I am using webpack to bundle the javascript part of the project and then the bundled javascript file is required inside view.php by calling $PAGE->requires->js();. The view.php and the bundled javascript file are not inside the same directory.

The javascript part of the plugin will need to load some images. I wish to use the built-in Asset Modules of the webpack to load the images instead of an absolute path. I followed the guild in webpack documentation on asset management (https://webpack.js.org/guides/asset-management/#loading-images). However, It seems like the path is set incorrectly.

I wish to know how to load the image correctly using the webpack's asset management.

These are the screenshots of the HTTP response

Screenshot of the HTTP response when I am using an absolute path to load the image

Screenshot of the HTTP response when I am using webpack asset module to load the image

This is my webpack config file

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    test: './src/test.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

This is how I import the image inside the javascript file

import fullScreenButtonIcon from '../../assets/icon/fullscreen.png';

This is my project's structure

/srv/http/moodle/mod/assessmenttool/
├── tasks
│   ├── assets
│   │   └── icon
│   │       ├── fullscreen.png
│   │       └── ...
│   ├── dist
│   │   └── ...
│   ├── src
│   │   ├── test.js
│   │   └── ...
│   ├── package.json
│   ├── package-lock.json
│   └── webpack.config.js
├── view.php
└── ...