webpack에서 파일 로더와 html 로더를 사용할 때. 이미지의 src 속성은 '[object module]'과 같습니다.

webpack4로 프로젝트를 처음부터 시작하고 있습니다. 그러나 html 파일로 이미지를 표시하려고 할 때. 유선 문제에 직면했습니다 : After npm run build. 이미지 태그의 src는로 구성됩니다 <image src="[object Module]". HTML 부분은 다음과 같습니다

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

은 webpack.config.js다음과 같이이다 :

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

그리고이 두 로더의 버전 :

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

문제가 무엇인지 알 수 없습니다 ...

다음 esModule: false과 같이 파일 로더에 옵션을 추가하십시오 .

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

URL 로더에도 동일하게 적용됩니다.

esModule 옵션은 버전 4.3.0의 파일 로더에 도입되었으며 5.0.0에서는 기본적으로 true로 설정되어 주요 변경 사항이 될 수 있습니다.

출처 :

• 파일 로더 릴리스 내역
• 관련 github 문제

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