Webpack 无法解析 Assets /资源？

Question

我正在尝试使用 webpack 在项目中加载图像

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

在我的 js 文件中，我有这一行

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

在我的 webpack.config.js 中:

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

但是在启动时，webpack 抛出错误:

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

看起来 webpack 没有找到它自己的内置包？ The doc对于内置的 t 非常清楚，我看不出与他们的示例有什么区别。

Answer 1

关于您提供的代码片段，看起来应该是type: 'asset/resource'而不是use:'asset/resource。

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

这是文档示例:

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