Webpack中file-loader无法读取图片文件问题求助

问题描述 #

• file-loader无法读取任何图片文件，在webpack.base.config中添加png格式支持后无效果，其他格式也无法读取
• 升级file-loader版本后问题仍未解决
• 补充：使用Webpack 5.51.1版本，问题已解决

报错信息 #

TypeError: Cannot read property 'fileLoader' of undefined
rsm_app-node-1 at Object.module.exports (/app/node_modules/file-loader/index.js:13:28)

Webpack.base.config配置 #

module.exports = (opts) => {
// ...
    module: {
      rules: [
        { test: /\.jsx?$/,
          exclude: /(node_modules)/,
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env',
              {
                "targets": {
                  "esmodules": true
                }
              }]
            ],
            plugins: [
              '@babel/plugin-proposal-class-properties',
              '@babel/plugin-transform-runtime'
            ]
          }
        },
        {
          test: /\.scss$/,
          use: [
            {
              // Adds CSS to the DOM by injecting a `<style>` tag
              loader: 'style-loader'
            },
            {
              // Interprets `@import` and `url()` like `import/require()` and will resolve them
              loader: 'css-loader'
            },
            {
              loader: 'sass-loader'
            },
            {
              // Loader for webpack to process CSS with PostCSS
              loader: 'postcss-loader',
              options: {
                plugins: function () {
                  return [
                    require('autoprefixer')
                  ];
                }
              }
            },
            {
              // Loads a SASS/SCSS file and compiles it to CSS
              loader: 'sass-loader'
            }
          ]
        },
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {test: /\.(png|jpg|gif)$/, loader: 'url-loader', options: {limit: 8192}},  // inline base64 URLs <=8k
        {test: /\.(ttf|eot|svg|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader'},
      ], // add all common loaders here
    },

    resolve: {
      extensions: ['','.ts', '.js', '.jsx'],
      modules: [
        path.resolve(PROJECT_ROOT, 'rsm-app-react'),
        "node_modules",
      ],
    },
  };
};

组件代码 #

import logo from '../data/logo.png';

return (
    <div className="ml-3 h-screen md:overflow-hidden overflow-auto md:hover:overflow-auto pb-10">
      {activeMenu && (
        <>
          <div className="flex justify-between items-center">
            <Link to="/" onClick={handleCloseSideBar} className="items-center gap-3 ml-3 mt-4 flex text-xl font-extrabold tracking-tight dark:text-white text-slate-900">
              { logo } <span class="company-name">Test</span>
            </Link>

内容的提问来源于stack exchange，提问作者Jabba the Hutt