웹팩(Webpack) - 로더

 

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의

 

웹팩은 모든 파일을 모듈로 바라본다.

자바스크립트로 만든 모듈 뿐만아니라 스타일시트, 이미지, 폰트 등 전부 모듈로 보기에 import 구문을 사용하면 자바스크립트 코드로 가져올 수 있다.

 

이것이 가능한 이유는 웹팩의 로더 덕분이다.

로더는 타입스크립트와 같은 다른 언어를 JS문법으로 변환하거나 이미지를 data URL 형식의 문자열로 변환한다. 

커스텀 로더

로더를 직접 만들고

myloader.js

module.exports = function myloader(content) {
  console.log("myloader가 동작함")
  return content
}

 

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

webpack.config.js

 

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

module.rules 배열에 모듈을 추가하는데 test와 use로 구성된 객체를 전달

test: 로딩에 적용할 파일을 지정.

use: 이 패턴에 해당하는 파일에 적용할 로더를 설정하는 부분

 

자주 사용하는 로더

css-loader

style-loader

file-loader

url-loader