로더란

웹팩은 '모든' 파일을 모듈로 인식하고 바라보기 때문에 이미지, 폰트 까지도 import 구문을 사용하면 자바스크립트 코드로 가져올 수 있는데 이것이 가능한 이유는 웹팩의 로더 덕분이다. 로더는 다른 언어를 자바스크립트 문법으로 변환해주거나 이미지를 데이터 URL 형식의 문자열로 반환 등의 역할을 한다. 

 

실제로 어떻게 사용하는지 한번 알아보자

 

우선 로더는 함수로서 역할을 하기 때문에 파일을 만들어 보자.

 

my-webpack-loader 라는 자바스크립트 파일안에 위의 코드를 예로 작성해보았다. 

 

이제 다시 webpack .config 파일로 들어가서 모듈이라는 객체명의 rules 항목을 통해 로더들을 설정해줄 수가 있다. 

 

사용법을 보면 알겠지만 test는 .js 확장자 즉 모든 자바스크립트 파일을 돌게하는 것이고 돌면서 실행시킬 함수가 담겨있는 파일을 use 에다가 적어주면 되겠다. 

 

기존의 build 명령어를 통해 결과를 확인하면 app.js 와 math.js 두개의 자바스크립트 파일을 돌며 2번 실행이 된것을 확인 할 수 있겠다 .