코딩 일기장

asset modules 는 로더를 추가로 구성하지 않아도 asset 파일 (폰트, 아이콘 등)을 사용할 수 있도록 해주는 모듈 webpack 5 이전에는 raw-loader : 파일을 문자열로 가져올 때 url-loader : 파일을 data URI 형식으로 번들에 인라인 추가할 때 file-loader : 파일을 출력 디렉터리로 내보낼 때 로더를 사용하는 것이 일반적이었다. webpack 5에서는 이러한 로더를 대체하기 위해 asset module에 4개의 새로운 모듈 유형이 추가되었다. asset/resource : 별도의 파일을 내보내고 URL을 추출 (file-loader 대체) asset/inline : asset의 data URI를 내보낸다. (url-loader 대체) asset/sourc..

file-loader css 뿐만아니라 소스코드에 사용하는 모든 파일을 모듈로 사용하게끔 할 수 있다. 파일을 모듈 형태로 지원하고 웹팩 아웃풋에 파일을 옮겨주는 것이 file-loader가 하는 일이다. src 경로에 bg.png파일을 추가하고 main.css에 body 부분을 다음과 같이 수정하고 빌드하면 body { background-image: url('./bg.png') } 전과 같이 module 에러가 뜨는 것을 확인할 수 있다. .png파일을 모듈로 인식하지 못하기 때문인데 file-loader를 install 하여 webpack.config.js에 추가해 보자 npm i file-loader webpack.config.js rules: [ ..., { test: /\.css$/, use:..