자주 쓰는 loader 1(css-loader, file-loader, url-loader, expose-loader)

loader란 웹팩이 웹앱을 해석할 때 해석하기 힘든 정적자원들을 처리하거나 해당 정적자원들을 유효한 모듈로 변환하여 애플리케이션에서 사용하거나 dependency graph에 추가하는 역할을 한다.

다양한 loader들은 npm을 통해 다운로드해야 사용할 수 있다.

예 : npm install --save-dev 로더명

로더를 만약 사용하지 않고 css파일을 import하는 js파일을 웹팩으로 컴파일 하면???

에러가 뜨면서 적절한 로더를 사용하라는 에러문구가 뜨게 된다.

 

그러면 어떠한 loader들이 있을까?

우선 loader는 아주 다양하기 때문에 이 글에서 모든 loader를 소개하는 것은 무리가 있기 때문에 흔히 프로젝트에 적용하는 loader 중 자주 쓰일 수 있는 loader를 소개하고 설명하고자 한다. 

 

1. css-loader

css-loader는 웹팩으로 프로젝트의 파일을 번들링할 때 css파일이 있을 경우 이 css파일도 js파일과 함께 번들링해주는 역할을 하는 loader이다.

 

js파일을 웹팩으로 번들링할 때 해당 js파일과 특정 css파일을 필요로 하는 html파일이 있다고 하자!

그때 해당 js파일에 해당 css파일을 import하는 코드를 넣으면 해당 html파일은 번들링된 js파일과 css파일을 사용할 수 있다.

해당 html파일은 번들링된 js파일을 의존하는 script태그가 들어가 있으면 번들링된 js파일의 코드를 사용할 수 있지만 css-loader로 빌드한 해당 css파일 안에 코드는 html에 적용되지 않는다.

다시 말하자면 css-loader만으로 웹팩으로 빌드한 css파일의 코드를 사용할 수 없으며 style-loader 혹은 추후에 배울 mini-css-extract-plugin라는 플러그인을 추가로 사용해야 비로소 해당 css파일의 코드가 적용된다는 것이다.

일단 mini-css-extract-plugin는 추후에 다룰 것이며 우선 style-loader는 다음과 같이 얘기할 수 있다.

 

style-loader : css파일을 번들링하여 해당 css파일을 참조하고 있는 html코드의 style태그 안에 자동으로 css코드를 넣어주는 기능이다.

그럼 일단 css-loader와 style-loader를 다운 받고 코드를 작성해보자.

우선 npm install --save-dev style-loader css-loader를 입력하여 다운 받는다.

그리고 해당 loader를 웹팩에서 활용하는 코드를 작성하면 다음과 같다.

 

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

 

webpack.config.js에서 test와 use란??

test : 해당 loader가 검사할 파일 확장자

use : 해당 파일에 적용할 로더의 이름

webpack.config.js에서 loader의 use는 오른쪽에서 왼쪽 순으로 적용되어 컴파일되기 때문에 css관련 loader를 설정할 때 맨 오른쪽 끝에 css-loader가 있어야 한다.

 

상황을 정리하자면 index.js에는 index.css파일을 import하고 있으며 웹팩을 실행했을 때 웹팩의 module은 index.js에서 css-loader가 import하고 있는 파일 중 css로 끝나는 index.css를 확인 후 css라고 인식하여 해당 파일을 번들링한다.

그리고 index.html에 index.js파일을 참조하고 있는 script태그가 있으면 index.js파일에서 import하고 있는 index.css는 index.html 파일의 style 태그에 해당 css코드들을 자동으로 삽입해 준다.

 

2. file-loader

웹팩으로 번들링 시 웹앱에 css, scss외의 폰트나 이미지 등의 타입의 파일이 있을 경우 이를 해석하도록 해주는 loader다.

예를 들어 index.js파일은 index.css를 import하고 있으며 여기서 index.css 파일 안에는 url()함수에 폰트나 이미지 파일명을 입력할 수 있는데 이것을 웹팩의 moduled이 발견하면 file-loader를 이용해서 특정 폴더에(예 : dist폴더)에 파일을 생성한다.

 

우선 npm install --save-dev file-loader로 다운 받는다.

그 후 module의 rules 안에 다음 코드를 추가한다.

 

// webpack.config.js
// ...
module.exports = {
  // ...
  {
      test: /\.(ttf|eot|woff|woff2|svg|png|ico|jpg|jpeg|gif)$/,
      use: [{
          loader: 'file-loader',
          options: {
              name: "[name].[ext]",
              publicPath: '/dist/',
          }
      }]
  }
  // ...
}

 

다시 한번 말하자면 test의 역할은 위의 경우 ttf,eot,woff,woff2,svg,png,ico,jpg,jpeg,gif으로 끝나는 파일이 프로젝트 폴더에 있을 경우 해당 파일을 dist폴더로 생성한다는 정규표현식이다.

그리고 file-loader의 옵션 중 name은 생성되는 파일의 이름을 바꿀 수 있는 기능이며 [name]에는 기존의 파일명이 들어오며 [ext]는 파일의 확장자가 그대로 들어온다는 의미이다.

하지만 여기서 publicPath없이 index.html파일을 브라우저에 렌더링하면 해당 폰트를 제대로 로딩하지 못한다.

css를 실행시키면 url(폰트의 경로) 코드로 인해 동일 폴더에서 이미지를 찾으려고 시도하게 된다.

하지만 웹팩으로 생성한 폰트 파일은 dist폴더 아래에 생성했기 때문에 이 점을 알고 있어야 하며 경로를 바로 잡기 위해 publicPath를 알고 있어야 한다.

 

publicPath는 생성된 파일을 사용할 때 파일의 경로 앞에 추가되는 문자열이며 생성된 파일의 위치를 브라우저에게 알려준다.

output에서 설정한 dist폴더에 해당 파일이 생성되기 때문에 publicPath값을 절대경로에 dist폴더를 추가 입력함으로써 생성된 파일을 사용 시 잘 찾도록 해준다.

 

한편 웹팩 실행 후 폰트가 적용된 웹사이트를 브라우저에서 실행시키고 콘솔을 보면 사파리, 파이어폭스에서는 이상이 없지만 크롬의 경우 다음과 같은 경고문이 뜬다.

 

OTS parsing error: invalid version tag
Failed to decode downloaded font: [My local URL]

 

이 경고문은 크롬 콘솔에서 확인할 수 있다.

원인 : 웹팩으로 생성된 파일을 사용하기 위해 설정한 publicPath에 url을 적을 때 상대경로를 적고 해당 파일을 참조하는 css파일에서도 상대경로를 적으면 chrome에서 파싱에러가 발생한다고 한다.

필자의 경우 해결책 : 폰트를 적용시키는 css파일 중 url에 다음과 같이 개발 시 'http://localhost:8081'를 배포시에는 실제 사이트주소인 'https://도메인.co.kr/dist'와 같은 절대경로를 prefix로 붙여줘야 한다.

해결할 때 참고한 사이트 : https://www.javaer101.com/article/7539865.html

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">크롬, 파일, CSS</font></font>

 

// 해당 css파일
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    /*개발환경에 적용하고 싶은 경우*/
    src: url("http://localhost:8081/dist/noto-sans-kr-v13-latin_korean-700.woff") format('woff')
    /*실제 서비스 환경에 적용하고 싶은 경우*/
    src: url("https://도메인.co.kr/dist/noto-sans-kr-v13-latin_korean-700.woff") format('woff')
}

 

하지만 위처럼 생성된 폰트 파일을 참조하는 경로를 절대경로로 입력해놓은 상태일 경우 파일(이미지, 폰트)이 생성되지 않기 때문에 해당 파일을 생성 시 위의 url은 프로젝트 상대경로로 한다.

 

3. url-loader

웹팩으로 번들링 시 웹앱에 css, scss외의 폰트나 이미지 등의 타입의 파일을 해석하지만 해석한 파일을 번들링한 파일로 생성하지 않고 파일을 base64 url로 변환하여 해당 파일 코드에 내장되도록 한다.

예를 들어 작은 이미지나 폰트 파일은 dist폴더에 새로 생성하지 않고 문자열 형태로 변환하여 번들된 css파일 중 url()함수의 인자에 넣는 역할을 한다.

 

우선 npm install --save-dev url-loader로 다운 받는다.

 

//webpack.config.js

// ...
{
    test: /\.(ttf|eot|woff|woff2|svg|png|ico|jpg|jpeg|gif)$/,
    use: [{
        loader: 'url-loader',
        options: {
            publicPath: '/dist/',
            name: "[name].[ext]",
	    // 10kb까지 url-loader가 처리
            limit : 10000
        }
    }]
},
// ...

 

여기서 limit는 해당 용량 이하의 파일들은 url-loader가 처리한다는 의미이다.

limite의 단위는 byte다.

css번들파일을 참고하면 url(data:~;base64,~)으로 바뀌어 있을 것이다.

이 limit을 통해 limit 이하의 용량을 갖는 파일은 url-loader가 처리하고 limit의 용량을 초과한 경우 file-loader가 처리할 수 있다.

 

4. expose-loader

expose-loader는 자바스크립트 라이브러리 사용 시 해당 라이브러리가 전역객체를 사용할 수 있도록 해주는 loader이다.

예를 들어 제이쿼리의 경우 "$", "jQuery"를 사용할 때 window.jQuery, window.$로 인식이 안 되어 제이쿼리를 사용하는 js파일에서 에러가 생기는 경우가 있다.

 

이러한 경우는 다음과 같이 expose-loader의 사용예시를 보면서 사용법을 익혀 보자!

해당 로더는 npm install --save-dev expose-loader로 설치하자!

 

// webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      //...
      {
        test: require.resolve("jquery"),
        loader: "expose-loader",
        options: {
          exposes: ["$", "jQuery"],
        },
      }
      //...		
    ]
  },
  //...
}

 

require.resolve()는 해당 인자에 들어가는 모듈에 대한 절대경로를 제공해준다.

options의 exposes는 전역객체를 활용하는 자바스크립트 라이브러리의 코드들을 입력하면 된다.

 

다음 글에서는 babel-loader에 대해 설명하고자 한다.