Webpack 无法解析资产/资源？

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没有找到自己的内置包？博士非常清楚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
},
],
},
};