Import images in a js project managed with jsconfig.conf and webpack

Question

I'm finding it difficult to configure a JS project managed with a /jsconfig.json file and webpack, where I'm importing two images in its main js script. Although I tried to follow this link, I still get the following error:

Cannot find module 'images/right.png' or its corresponding type declarations.

in my main script at this line (import of packages located inside node_modules work well):

    import image from 'images/right.png';

My /jsconfig/json looks like this:

    {
      "compilerOptions": {
        "module": "commonjs",
        "checkJs": true,
        "baseUrl": "src",
        "paths": {
          "images/*": ["./images/*"]
        }
      },
      "exclude": ["node_modules", "dist"],
      "include": ["src"]
    }

and my project structure:

    dist
    src
      app.js
      images.js
    jsconfig.json
    webpack.config.js

The relevant part in my webpack.config.js is:

    module.exports = {
      resolve: {
        // instead of relative path in import
        alias: {
          images: path.resolve(__dirname, 'src/images'),
        },
      },
    }

Answer 1

Apparently js projects are unable to load files other than js/ts scripts (see this answer). As a result a module needs to be declared in src/images.d.ts:

declare module "*.png" {
  const value: string;
  export default value;
}