자주 사용하는 로더 - 웹팩(Webpack) 기본편 | 김정환

1. css-loader

스타일시트도 import 구문으로 불러 올 수 있다.

 

app.js :

import './style.css'

ES6의 import 구문으로 가져오려면 'app.css' 파일이 모듈이 되어야 하는데, 웹팩의 로더가 css 파일을 모듈로 바꾸는 역할을 한다.

 

style.css : 

body { background-color: gray; }

CSS 파일을 자바스크립트에서 불러와 사용하려면 CSS를 모듈로 변환하는 작업이 필요하다. css-loader가 그러한 역할을 하는데 우리 코드에서 CSS 파일을 모듈처럼 불러와 사용할 수 있겠끔 해준다. 

 

> npm install css-loader css-loader 설치

 

webpack.config.js :

module.exports = {
  module: {
    rules: [
      {
        test : /\.css$/,
        use : [
          'css-loader'
        ]  
      }
    ]
  }
}

 

> npm run build npm 실행

: output 파일(main.js)에 CSS 코드가 문자열로 들어가 있다. 하지만 CSSOM 형태가 아니기에 브라우저에서 적용되지 않는다. HTML 파일에서 CSS 코드를 직접 불러오거나 인라인 스크립트로 넣어줘야 한다.

 

2. style-loader

모듈로 변경된 스타일 시트는 DOM에 추가되어야만 브라우져가 해석할 수 있다. css-loader로 처리하면 자바스크립트 코드로만 변경되었을 뿐 DOM에 적용되지 않았기 때문에 스타일이 적용되지 않았다.

 

style-loader는 자바스크립트로 변경된 스타일을 동적으로 DOM에 추가하는 로더이다. CSS를 번들링하기 위해서는 css-loader와 style-loader를 함께 사용한다.

 

> npm install style-loader style-loader 설치

 

webpack.config.js :

module.exports = {
  module: {
    rules: [
      {
        test : /\.css$/,
        use : [
          'style-loader',
          'css-loader'
        ]  
      }
    ]
  }
}

- 웹팩 로더는 한 파일에 대해서 여러 개가 실행되는데, 배열의 뒤에서부터 앞으로 순서대로 로더가 동작한다.

- 위 설정은 모든 .css 확장자로 끝나는 모듈을 읽어 들여 css-loader를 적용하고 그 다음 style-loader를 적용한다.

 

3. file-loader

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

 

style.css :

body { background-image: url(bg.png); }

> npm install file-loader file-loader 설치

 

webpack.config.js :

module.exports = {
  module: {
    rules: [
      {
        // css-loader 설정 구문 ...
      },
      {
        test: /\.png$/,    // .png 확장자로 마치는 모든 파일
        use: [
          'file-loader'    // 파일 로더를 적용한다
        ]
      }
    ]
  }
}

웹팩이 .png 파일을 발견하면 file-loader를 실행할 것이다. 로더가 동작하고 나면 아웃풋에 설정한 경로로 이미지 파일이 복사된다.캐쉬 갱신을 위한 처리로 파일명이 해쉬코드로 변경 되었다. 

* 캐쉬 갱신 처리 이유: 정적 파일의 경우 브라우저에서 성능을 위해서 캐시한다. 자바스크립트, CSS, 이미지, 폰트 등의 파일 내용이 달라지고 이름이 같으면, 이전에 캐시로 저장했던 파일의 내용을 브라우저가 사용하고 이를 예방하기 위해서 이름을 변경한다.

 

하지만 이대로 index.html 파일을 브라우져에 로딩하면 이미지를 제대로 로딩하지 못할 것이다. CSS를 로딩하면 background-image: url(bg.png) 코드에 의해 동일 폴더에서 이미지를 찾으려고 시도한다. 그러나 웹팩으로 빌드한 이미지 파일은 output인 dist 폴더 아래로 이동했기 때문에 이미지 로딩에 실패한다.

 

file-loader 옵션을 조정해서 경로를 바로 잡아 주어야 한다.

 

webpack.config.js :

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

- publicPath 옵션은 file-loader가 처리하는 파일을 모듈로 사용할 때 경로 앞에 추가되는 문자열이다. output에 설정한 ‘dist’ 폴더에 이미지 파일을 옮길 것이므로 publicPath 값을 이것으로로 지정했다. 파일을 사용하는 측에서는 ‘bg.png’를 ‘dist/bg.png’로 변경하여 사용할 것이다.

- name 옵션을 사용했는데 이것은 로더가 파일을 아웃풋에 복사할때 사용하는 파일 이름이다. 기본적으로 설정된 해쉬값을 쿼리스트링으로 옮겨서 ‘bg.png?6453a9c65953c5c28aa2130dd437bbde’ 형식으로 파일을 요청하도록 변경했다.

 * [name] : 원본 파일명  |   .[ext] : 확장자명  |  ?[hash] : 해쉬값(캐시 무력화를 위해서 쿼리스트링으로 요청)

 

4. url-loader

사용하는 이미지 갯수가 많다면 네트웍 리소스를 사용하는 부담이 있고 사이트 성능에 영향을 줄 수도 있다. 만약 한 페이지에서 작은 이미지를 여러 개 사용한다면 Data URI Scheme을 이용하는 방법이 더 나은 경우도 있다. 

*Data URI Scheme :

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

- data:image/png; 데이터 포맷을 정하고 / Base64, 방식으로 인코딩하여 / 문자열 형태로 소스 코드에 넣는 형식

 

url-loader는 이러한 처리를 자동화해주는 녀석이다.

 

> npm install url-loader url-loader 설치

 

webpack.config.js :

module.exports = {
  module: {
    rules: [
      {
        // css-loader 설정 구문 ...
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: {
          loader: 'url-loader', // url 로더를 설정한다
          options: {
            publicPath: './dist/', // file-loader와 동일
            name: '[name].[ext]?[hash]', // file-loader와 동일
            limit: 5000 // 5kb 미만 파일만 data url로 처리 
          }
        }
      }
    ]
  }
}

- file-loader와 옵션 설정이 거의 비슷하고 마지막 limit 속성만 추가했다. 모듈로 사용한 파일중 크기가 5kb 미만인 파일만 url-loader를 적용하는 설정이다. 만약 이보다 크면 file-loader가 처리하는데 옵션 중 fallback 기본값이 file-loader이기 때문이다.

 

- 빌드 결과를 보면 small.png 파일이 문자열로 변경되어 있는 것을 확인 할 수 있다. 반면 5kb 이상인 bg.png는 여전히 파일로 존재한다.

 

※ 아이콘처럼 용량이 작거나 사용 빈도가 높은 이미지는 파일을 그대로 사용하기 보다는 Data URI Scheeme을 적용하기 위해 url-loader를 사용하면 좋겠다.

---

SUMMARY

# css-loader

: css 파일을 자바스크립트 모듈처럼 사용할 수 있도록 처리

 

# style-loader

: 이렇게 처리된 자바스크립트 문자열로 된 스타일시트 코드를 HTML에 주입시켜서 브라우저에 스타일이 적용되도록

 

# file-loader

: 이미지 파일을 모듈로 사용할 수 있도록 처리하며, 사용한 파일을 output 경로로 이동한다.

 

# url-loader
: 파일을 base64로 인코딩해서 그 결과를 자바스크립트 문자열로 변환한다. 처리할 파일의 용량 제한을 두어서 일정 파일 미만만 처리하고 나머지는 file-loader로 위임한다.

 

---

 

TODO.1

 CSS 파일을 엔트리포인트(app.js)에서 로딩하세요.

웹팩에서 로딩할수 있도록 로더를 설정해야 합니다.

 

1. css-loader와 style-loader 설치

> npm install css-loader style-loader

 

2. webpack.config.js에서 module 설정

module.exports = { 
  module: { 
    rules: [ 
      { 
       test: /\.css$/, 
        use: ['style-loader', 'css-loader'] 
      } 
    ] 
  } 
}

 

3. app.css 에서 css 파일 가져오기

import './main.css'

 

---

 

TODO.2

파일을 로딩할수 있도록 웹팩 로더 설정을 추가하세요

 

1. file-loader 나 image-loader 설치

> npm install file-loader

 

2. webpack.config.js에서 module 설정

module.exports = { 
  module: { 
   rules: [ 
      { 
       test: /\.jpg$/, 
        loader: 'file-loader', 
        options: { 
          name: '[name].[ext]?[hash]', 
          publicPath: './dist/ 
        } 
      } 
    ] 
  } 
}

* 복수 확장자를 선택하는 정규식 표현 : /\.(jpg|png|gif)$/

 

* publicPath를 dist 폴더로 지정하는 이유

: index 파일이 src 폴더밖에 있기 때문에 index 파일에서 호출하려면 디렉토리 경로를 dist로 바꿔줘야 한다.

 

용량이 작은 이미지는 base64 인코딩된 문자열로 바꾼다

1. url-loader 설치

> npm install url-loader

 

2. webpack.config.js에서 module 설정

module.exports = {  
  module: {  
   rules: [  
      {  
       test: /\.(jpg|png)$/,  
        loader: 'url-loader',  
        options: {  
          name: '[name].[ext]?[hash]',  
          publicPath: './dist/, 
          limit: 10000,    // 10kb 
        }  
      }  
    ]  
  }  
}