Webpack의 Assets

모든 프로젝트에는 일부 리소스 또는 assets(assets)이 있습니다. 이러한 assets은 이미지, 글꼴 파일 등과 같은 것들입니다.

일반적으로 우리는 단순히 프로젝트 폴더에서 빌드 폴더로 리소스를 옮기기 원합니다. 그러나 다시 캐시 문제가 발생합니다. 예를 들어, 브라우저는 이미지를 캐시합니다. 이는 파일 이름을 변경하지 않고 이미지를 변경하면, 사용자 브라우저에 이전 버전의 이미지가 캐시되어 있기 때문에 사이트 사용자가 이전 버전의 이미지를 보게 된다는 것을 의미합니다[citation:8].

문제에 대한 해결책은, 이미 알고 계시듯이, 파일 이름에 해시를 추가하는 것입니다. Webpack은 리소스 파일을 빌드 폴더에 복사하고, 해시를 추가하며, 가장 중요한 것은 모든 파일에서 이러한 리소스에 대한 경로를 새로운 경로로 변경할 수 있게 해줍니다[citation:8].

Webpack에서 assets 작업은 특별한 asset 모듈을 사용하여 수행됩니다[citation:1]. 네 가지 유형이 있습니다: asset/resource, asset/inline, asset/source, asset[citation:8].

asset/resource 모듈은 파일을 프로젝트 폴더에서 빌드 폴더로 복사하고 그에 대한 경로를 새로운 경로로 대체합니다[citation:1]. asset/inline 모듈은 프로젝트 폴더에서 파일을 가져와 빌드 코드에서 파일 경로를 base64 데이터 URI로 대체합니다[citation:1]. asset/source 모듈은 프로젝트 폴더에서 파일을 가져와 텍스트 문자열 형태로 반환합니다[citation:1]. asset 모듈은 파일을 빌드 폴더에 복사할지 base64 데이터 URI로 변환할지 자동으로 선택합니다. 선택은 파일 크기에 따라 이루어집니다. 기본적으로 8kb보다 큰 파일은 별도 파일로 내보냅니다[citation:1].

이러한 모듈을 적용하는 일반적인 방식은 다음과 같습니다:

module: {
	rules: [
		{
			test: /\.png$/,        // 파일들
			type: 'asset/resource' // 모듈 유형
		}
	]
},

assets이 무엇을 의미하는지 설명하세요.

base64가 무엇이고 CSS에서 어떻게 사용되는지 검색해 보세요.

assets용 모듈의 4가지 유형을 나열하세요.

4가지 모듈 유형 각각의 용도에 대해 설명하세요.