로더

로더

웹팩은 모든 파일(html, js, css ...)을 모듈로 하여 바라보고 있습니다.
그러하여 import 구문을 사용하여 자바스크립트 코드 안으로 가져올 수 있는데 이게 가능한 이유가 웹팩의 로더 덕분입니다.
로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환, 이미지를 dataUrl 형식의 문자열로 변환, CSS 를 자바스크립트에서 직접 로드할 수 있도록 합니다.

커스텀 로더 만들기

임의의 js 파일을 하나 만들어봅시다.
userLoader.js

module.exports = function userLoader (c) {
  return c;
}

로더가 읽은 파일의 내용이 함수 인자 c 로 전달됨.

webpack.config.js

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

module.rules 배열에 모듈을 추가하고 test, use 로 구성되어 있음.
test 는 로딩에 적용할 파일(js,ts,html,css 등), 정규표현식으로 만든 파일 패턴을 지정할 수 있음.
use 에는 패턴에 해당하는 파일에 적용할 로더를 설장하면 됨.

자주 사용하는 로더

참고1: npm module 설치시 -D 가 있으면 devDependencies, 안 붙이면 dependencies 에 설치됨.
참고2: 로더의 경우, 웹팩 버전에 영향을 받을 수 있음으로 웹팩버전에 맞는 로더를 설치해주셔야 합니다.

css-loader

css 파일을 모듈로 불러 올 수 있는 로더입니다.

npm install css-loader

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // .css 확장자로 끝나는 모든 파일
        use: ["css-loader"], // css-loader를 적용한다
      },
    ],
  },
}

웹팩은 엔트리 포인트부터 시작해서 모듈을 검색하다가 CSS 파일을 찾으면 css-loader 로 처리되는데, 빌드한 결과를 보면 css 코드가 자바스크립트로 변환된 것을 볼 수 있음. 하지만 변환만 된 것이고 cssom tree 를 만들지 못했음으로 화면에 결과가 나오지 않음. 이러한 결과를 나오게 하기 위해 style-loader 를 사용해야함.

style-loader

css-loader 로 처리시 자바스크립트 코드로만 변경되었을 뿐, 돔에 적용되지 않았기 때문에 style-loader 를 사용하여 자바스크립트로 변경된 스타일을 동적으로 돔에 추가해줍니다.

npm install style-loader

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"], // style-loader를 앞에 추가한다
      },
    ],
  },
}

file-loader

css 뿐만 아니라, 소스코드에서 사용하는 모든 파일을 모듈로 사용하게끔 할 수 있다. 파일을 모듈 형태로 지원하고 웹팩 아웃풋에 파일을 옮겨주는 것이 file-loader 가 하는 일이다. 가령 CSS 에서 url 함수에 이미지 파일 경로를 지정할 수 있는데, 웹팩은 file-loader 를 이용해서 이 파일을 처리한다.

npm install file-loader

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.png$/, // .png 확장자로 마치는 모든 파일
        loader: "file-loader",
        options: {
          publicPath: "./dist/", // prefix를 아웃풋 경로로 지정
          name: "[name].[ext]?[hash]", // 파일명 형식
        },
      },
    ],
  },
}

url-loader

사용하는 이미지 갯수가 많다면 네트웍 리소스를 사용하는 부담이 있고 사이트 성능에 영향을 줄 수도 있다. 만약 한 페이지에서 작은 이미지를 여러 개 사용한다면 Data URI Scheme 을 이용하는 방법이 더 나은 경우도 있다. (이미지를 Base64로 인코딩하여 문자열 형태로 소스코드에 넣는 형식이다.)

npm install url-loader

webpack.config.js

module.exports = {
  mode: 'development',
  // 시작점을 기준으로 모든 모듈을 찾아 번들링 해줌.
  entry: {
    main: './src/app.js'
  },
  // 번들링한 결과를 아웃풋에 전달합니다.
  output: {
    // 절대경로
    path: path.resolve('./dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        // 각 js 파일당 로더가 한 번 씩 호출됨.
        test: /\.css$/,
        // loader use
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader', // url 로더를 설정
        options: {
          publicPath: './dist/',
          name: '[name].[ext]?[hash]',
          limit: 15000, // 15kb (파일 용량 제한), 이상이면 file-loader가 자동으로 실행됨.
        }
      }
    ]
  }
}

file-loader 와 옵션 설정이 거의 비슷하고, 마지막 limit 속성만 추가됨. limit 속성에 따라 20kb 미만인 파일은 url-loader 를 적용하고, 이보다 크면 file-loader 가 처리됨.