I am trying to load an image in a project using webpack

asset
  resource
    image.png
src
  components
    global
      module
        module.js

In my js file, I have this line

import image from '../../../../asset/resource/image.png'

And in my webpack.config.js:

module.exports = {
  // snip
  module: {
    rules: [
      // snip
      {
        test: /\.png$/i,
        use: 'asset/resource'
      }
    ]
  },
  // snip
}

But on start, webpack throw an error:

ERROR in ./src/components/global/module/module.riot 1:0-86
Module not found: Error: Can't resolve 'asset/resource' in '/path/to/my/project'
resolve 'asset/resource' in '/path/to/my/project'
  Parsed request is a module
  using description file: /path/to/my/project/package.json (relative path: .)
    resolve as module
      looking for modules in /path/to/my/project/node_modules
        /path/to/my/project/node_modules/asset doesn't exist
      /path/to/my/node_modules doesn't exist or is not a directory
      /path/to/node_modules doesn't exist or is not a directory
      /path/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./src/components/global/ sync [a-zA-Z0-9-] \.riot ./module/module.riot
 @ ./src/register-global-components.js 4:32-100
 @ ./src/index.js 4:0-67 7:0-24

webpack 5.66.0 compiled with 1 error in 3616 ms

So it looks like webpack doesn't find it's own built in package ? The doc s quite clear about t being built in and I don't see the difference with their example.

CodePudding user response：

Regarding your provided snippet, it looks like it should be type: 'asset/resource' instead of use: 'asset/resource.

module.exports = {
  // snip
  module: {
    rules: [
      // snip
      {
        test: /\.png$/i,
        // use: 'asset/resource'
        type: 'asset/resource'
      }
    ]
  },
  // snip
}

Here's the documentation example:

 const path = require('path');

 module.exports = {
   entry: './src/index.js',
   output: {
     filename: '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', // EXAMPLE HERE
      },
     ],
   },
 };