[인프런] 프론트엔드 개발환경의 이해와 실습 (로더)

로더가 무엇이고 어떤 역할을 하는지, 동작 원리는 무엇인지 알아보자.

로더의 역할

웹팩은 모든 파일을 모듈로 바라보기 때문에, 자바스크립트로 만든 모듈 뿐만 아니라 스타일시트, 이미지, 폰트까지 전부 모듈로 본다. 따라서 import 구문을 사용하면 자바스크립트 코드 안으로 가져올 수 있다.

이것이 가능한 이유는 웹팩의 로더 덕분이다. 로더는 모든 파일을 자바스크립트에서 사용할 수 있도록 변환해준다. 다른 언어 파일을 자바스크립트 문법으로 변환해주거나, 이미지를 data URL 형식의 문자열로 변환해주거나, css 파일을 자바스크립트에서 직접 로딩할 수 있도록 해준다.

 

로더 동작 원리

동작 원리를 이해하기 위해 로더를 직접 작성해보자.

my-webpack-loader.js

module.exports = function myWebpackLoader (content) {
    console.log('loading');
    return content;
}

로더는 함수 형태로 작성할 수 있다. 로더가 파일을 읽고 읽은 파일의 내용이 content 인자로 전달된다. 위의 코드는 로더가 동작하는지만 확인하는 용도로, 로그만 찍고 읽은 파일 내용을 그대로 리턴해준다.

 

로더를 사용하려면 웹팩 설정 파일의 module 객체에 추가해준다.

webpack.config.js

module: {
  rules: [{
    test: /\.js$/, // .js 확장자로 끝나는 모든 파일
    use: [path.resolve('./my-webpack-loader.js')] // 방금 만든 로더를 적용한다
  }],
}

module 객체를 생성하고, rules 배열에 test와 use로 구성된 객체를 전달한다.

test에는 로딩에 적용할 파일을 지정한다. 파일명 뿐만 아니라 파일 패턴을 정규표현식으로 지정할 수 있는데, 위의 코드는 .js 확장자를 갖는 모든 파일을 처리하겠다는 의미이다.

use에는 파일에 적용할 로더를 설정하는 부분이다. 위의 코드에서는 방금 만든 my-webpack-loader.js 파일 경로를 지정했다.

 

이렇게 설정이 끝나면 npm run build로 웹팩을 실행해보자. 실행하면 console.log에 작성했던 loading이 나타난다. 해당 함수가 동작했다는 의미이다. 하나의 파일마다 로더가 한 번씩 동작하여 처리된다.

---

출처: [인프런] 프론트엔드 개발환경의 이해와 실습