로더 - 웹팩(Webpack) 기본편 | 김정환

1. 로더의 역할

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

이것이 가능한 이유는 웹팩의 로더 덕분이다. 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문접으로 변환해 주거나 이미지를 data URL 형식의 문자열로 변환한다. 뿐만 아니라 CSS 파일을 자바스크립트에서 직접 로딩할 수 있도록 해준다.

 

2. 커스텀 로더 만들기

my-webpack-loader.js :

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

webpack.config.js :

module.exports = {
  module: {
    rules: [
      {
        test : /\.js$/,   // 로더가 처리해야할 파일들의 패턴(정규표현식)
        use : [
          path.resolve('./my-webpack-loader.js')    // 사용할 로더를 명시
        ]  
      }
    ]
  }
}

> npm run build npm을 실행한다.

* 결과값 : js 파일의 개수만큼 console.log()가 찍힌다

  그 이유는, webpack.config.js의 module에서 설정한대로 모든 자바스크립트 파일마다 로더가 한번씩 실행되기 때문에.

 

my-webpack-loader.js :

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

> npm run build npm을 실행한다.

* 결과값 : js 파일에서 'console.log(' 을 'alert('으로 바꿔서 실행한다.

---

SUMMARY

# 웹팩의 로더는 각 파일을 처리한다.

 : 처리할 파일의 패턴을 명시하고 패턴에 해당되는 파일은 use에 설정한 로더 함수를 작동한다.  파일이 여러 개라면 로더 함수도 여러번 작동한다.

 

package.json :

  "scripts": {
    "build": "webpack --progress"
  },

* --progress : 빌드 상태를 커맨드라인으로 표시해준다.