Gdy korzystam z modułu ładującego pliki i modułu ładującego HTML w pakiecie internetowym. Atrybut src obrazu będzie podobny do „[Object Module]”

Projektuję z webpack4 od zera. Ale kiedy próbuję wyświetlić obraz w pliku HTML. Napotkałem problem przewodowy: Po npm run build. src tagu obrazu zostanie zbudowany jako <image src="[object Module]". Część HTML to:

<img src="images/main_background.jpg">

To webpack.config.jsjest tak:

   // ignore ...
   {
    test: /\.html$/,
    use: [
       {loader: 'html-loader'}
    ]
   },
   {
      test: /\.(jpeg|jpg|png)$/,
      use: [
        'file-loader'
      ]
  }

I wersja tych dwóch ładowarek:

"file-loader": "^5.0.2",
"html-loader": "^0.5.5",

Nie mogę ustalić, na czym polega problem ...

Spróbuj dodać esModule: falseopcję do programu ładującego pliki w taki sposób:

  ...
  {
    test: /\.(jpeg|jpg|png)$/,
    use: [
      loader: 'file-loader',
      options: {
        esModule: false
      }
    ]
  }
  ...

To samo dotyczy modułu ładującego adresy URL.

Opcja esModule została wprowadzona w module ładującym pliki w wersji 4.3.0, a w 5.0.0 została domyślnie ustawiona na true, co może być przełomową zmianą.

Źródła:

• Historia wersji modułu ładującego pliki
• odpowiedni problem z github

{
    test: /\.(png|jpe?g|gif)$/i,
    loader: 'file-loader',
    options: {
        name: '[name][hash].[ext]',
        outputPath: 'images',
        esModule: false,
    },
},