Webpack 为什么Web包中的资产管理器没有加载我的图像文件？

为此，我遵循以下原则。但在尝试构建捆绑包时，它告诉我以下错误：

ERROR in ./src/index.js 2:14
Module parse failed: Unexpected token (2:14)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import _ from 'lodash';
> import lydImg './lyd.jpg';
| import './style.css';
|

我的

webpack.config.js

中的代码是：

const path = require('path');

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

和我的

index.js

：

import _ from 'lodash';
import lydImg './lyd.jpg';
import './style.css';

function component() {
  const element = document.createElement('div');

  // Lodash, now imported by this script
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello')

  const lyd = new Image()
  lyd.src = lydImg
  element.appendChild(lyd)

  return element;
}

document.body.appendChild(component());

可能是我的文件/文件夹结构？是否需要安装其他依赖项？

请尝试以下语法：

import lydImg from './lyd.jpg';

---

妈的，我怎么忘了。。。谢谢。