Khi tôi sử dụng trình tải tệp và trình tải html trong gói webpack. Attr src của hình ảnh sẽ giống như '[Module đối tượng]'

Tôi đang làm một dự án với webpack4 từ đầu. Nhưng khi tôi cố gắng hiển thị một hình ảnh trong tập tin html. Tôi phải đối mặt với một vấn đề có dây: Sau npm run build. src của thẻ hình ảnh sẽ được xây dựng như <image src="[object Module]". Phần html là:

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

Các webpack.config.jslà như thế này:

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

Và phiên bản của hai bộ tải này:

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

Tôi không thể tìm ra vấn đề gì ...

Hãy thử thêm esModule: falsetùy chọn vào trình tải tệp như vậy:

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

Áp dụng tương tự cho trình tải url.

Tùy chọn esModule đã được giới thiệu trong trình tải tệp trong phiên bản 4.3.0 và trong 5.0.0, nó đã được đặt thành đúng theo mặc định có thể là một thay đổi đột phá.

Nguồn:

• lịch sử phát hành trình tải tập tin
• vấn đề github có liên quan

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