0
로더 객체의 test 키 뒤에 정규 표현식을 설정할 때 전체 개의 파일이 프로젝트의 파일로 필요하지 않더라도 지정한 로더를 사용하여로드합니다. 진입 점? 그러면 파일이 bundle.js에 저장됩니까?Webpack Loader는 어떤 파일을 처리합니까?
A
답변
0
아니요. 스크립트에 필요한 것만 포함합니다.
0
<img src={ require('../some/img.png') } />은 Webpack에 소스 코드가이 이미지를 실행해야한다고 알리는 방법입니다.
프로덕션 Webpack 빌드에서는 <img src="http://yoursite/whatever/89de0f2.png" />과 같이 컴파일됩니다. require() 문은 이 아니며이 실행되면 유효한 Javascript 코드로 바뀝니다. 이 대체 된 코드는 bundle.js에 들어 있습니다.
이미지는 로컬 dist/ 폴더와 같이 지정한 출력 폴더에 저장되며 파일 내용의 일부 해시 인 고유 한 이름으로 바뀌어 89de0f2.png이됩니다. (예를 들어이 이름을 만들었지 만 일반적으로 그런 이름으로 보입니다).
89de0f2.png 파일을 업로드하면 소스 코드가 89de0f2.png으로 정확하게 참조되므로 해당 이미지의 버전이 보장됩니다. 이것이 Webpack이 생산에 자산 로딩을 보장하는 방법입니다.
특별히 묻는다면 Wepback은 dist/ 폴더에만 img.png을 89de0f2.png으로 지정합니다. 다른 모든 이미지는 해당 폴더에 저장되지 않습니다.
base64 인코딩 이미지를 묻고 bundle.js 파일에 직접 넣을 수도 있습니다. 이 경우 dist/에 이미지가 입력되지 않지만 다른 모든 규칙이 응답합니다. require() 호출은 유효한 Javascript로 대체됩니다.
Webpack에 여러 자산이 필요한 경우가 있습니다. <img src={ require.context('./images', true, /\.png/) } />과 같은 패턴을 요구할 수 있으며 Webpack은 해당 디렉토리의 모든 png 파일을 dist/ 폴더에 작성합니다. 자세한 내용은 this Stackoverflow question을 참조하십시오.
+0
일 뿐이므로 webpack이 한 가지 방법으로 만지거나 'entry' 파일에서 나온 파일의 긴 경로를 통해 또 다른 파일이 필요합니까? – mangocaptain
도움이 될만한 내용 : http://blog.andrewray.me/webpack-when-to-use-and-why/ 아니요. 특별히 'require()'파일 인 –