webpack은 이미지를 어떻게 처리합니까?

Question

이미지를 묶을 수없는 경우 이미지는 어디에 있습니까? 당신이 당신의 웹팩 설정에서

Answer 1

(꿀꺽 같은) 특정 디렉토리에 이미지를 복사 할 웹팩 제외하고 다른 프로세스가 필요하십니까, 당신은 같은 파일 로더에 대한 규칙을 추가해야합니다 :

module: { 
    rules: [ 
    {test: /\.svg|\.png|\.jpg$/, use: ['file-loader']}, 
    ] 
} 

파일 로더를 설치할 수 있습니다. here

Answer 2

많은 경우 이미지를 가져와야합니다. 당신의 app.js의 상단에 예를 들어, 당신은

import '../../../css/bb_client_flow.png'; 

그런 다음 코드에서 자산 폴더에있는 이미지를 참조하는 태그를 포함 할 수 있습니다.

<img src="/assets/bb_client_flow.png" className="auth-flow"/> 

이렇게하면 이미지가 자동으로 에셋 폴더에 저장됩니다. 웹팩 설정에서 로더와 같은 것을 사용한다면. 이것은 당신이 장치에 따라 시간과 UX를로드 개선으로

{ 
     test: /\.(png|jpg|gif|json|xml|ico|svg)$/, 
     use: [ 
      { 
      loader: 'file-loader', 
      options: { 
       name: '[name].[ext]', 
       outputPath: 'assets/', 
       publicPath: '/' 
      } 
      } 
     ] 
     } 

마지막으로 나는 그림 태그의 사용과 different screen sizes에 대해 서로 다른 크기의 이미지의 사용을 권장하고 싶다.

<figure> 
    <picture> 
    <source media="(min-width: 750px)" 
      srcset="images/horses-1600_large_2x.jpg 2x, 
        images/horses-800_large_1x.jpg" /> 
    <source media="(min-width: 500px)" 
      srcset="images/horses_medium.jpg" /> 
    <img src="images/horses_small.jpg" alt="Horses in Hawaii"> 
    </picture> 
    <figcaption>Horses in Hawaii</figcaption> 
</figure>