webpack에서 로더를 사용하면 빌드 파일에 어떤 영향을 줍니까?

Question

전통적인 웹 응용 프로그램 (MVC 유형)을 작성할 때 자산이 공용 폴더에서 제공되지만 (보통) 공용 폴더가 없다는 것을 알게됩니다 (create-react-app 사용) ... 대신 로더를 사용하십시오.

로드 된 파일은 Webpack이 빌드를 수행 한 후 React를 위해 생성하는 번들 파일의 일부로 포함되어 있습니까? 이미지 로더를 사용하는 대신 정적 자산에 CDN을 사용하면 내 빌드 크기가 커지므로 가장 좋습니다.

또는 create-react-app를 사용할 때 정적 자산을 처리 할 때 모범 사례는 무엇입니까?

의견을 보내 주셔서 감사합니다. 그냥 당신이 create-react-app를 사용하는 경우

Answer 1

... 더 잘 이해하려고 노력하고, 당신이 당신의 JS 파일로 이미지를 가져, 그 이미지가 url-loader 웹팩 모듈 (의 GitHub의에 link)를 사용하여로드 할 것 중 하나는 바로 이미지를 내장하는 (here에 더 많은 것) DataURL를 사용하여 HTML로 삽입하거나 이미지가 10,000 바이트보다 크면 이미지를 별도의 파일로 저장합니다.

관련 코드 webpack.config.prod.js이다 : 상기 구성 단위

{ 
    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], 
    loader: require.resolve('url-loader'), 
    options: { 
     limit: 10000, 
     name: 'static/media/[name].[hash:8].[ext]', 
    }, 
}, 

, 큰 이미지 (10,000 바이트 이상)은 static/media 폴더에 배치된다.

import img from './file.png' 

당신이 당신의 이미지를 가져하지 않는 경우, 그것은 당신의 이미지를 구성하는 방법을 선택하는 당신까지 완전히 : 아래처럼 JS 파일로 이미지를 가져 오는 경우

이

는 동작입니다. 예를 들어, 당신은 당신의 루트 디렉토리에 /static/images 폴더에 이미지를 배치 할 수 있습니다, 그래서 같이 그 이미지를 참조 : 가장 좋은 방법의 측면에서

<img src="/static/images/logo.png" /> 

, 당신은 인수 어느 쪽이든 할 수 있습니다. url-loader을 사용할 때의 주요 이점 중 하나는 작은 이미지가 HTML에 포함되어 성능에 도움이된다는 것입니다. 반면에 CDN에서 이미지를 제공하면 응용 프로그램 서버보다 빠르게 대형 이미지를 제공 할 수 있습니다.