[인프런] 프론트엔드 개발환경의 이해와 실습 (자주 사용하는 로더)

로더 중에서 자주 사용하는 로더에 대해 알아보고 직접 사용해보자.

자주 사용하는 로더

css-loader

css-loader를 사용하면 자바스크립트에서 CSS 파일을 import 구문을 통해 모듈로 불러올 수 있다. 그러기 위해 css-loader를 설치해보자.

$ npm install -D css-loader

그리고 웹팩 설정에 로더를 추가한다.

webpack.config.js

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

웹팩이 엔트리 포인트부터 시작해서 모듈을 검색하다가 CSS 파일을 찾으면 css-loader로 처리하도록 설정해두었다. use에 로더 경로를 지정하는 것 대신 로더 이름을 문자열로 전달해도 된다.

npm run build 명령어로 웹팩을 실행시키면 결과 파일이 생성될 것이다. 해당 파일에서 CSS코드가 자바스크립트로 변환된 것을 확인할 수 있다.

이후, 해당 파일을 적용시킨 html을 브라우저에서 열었을 때 CSS가 적용되어 나타나야 하는데, 돔에 적용되지 않아 스타일이 나타나지 않고 빈 화면만 나타난다.

 

 

style-loader

모듈로 변경된 스타일시트는 돔에 추가되어야만 브라우저가 해석할 수 있다. css-loader로만 처리하면 위와 같은 문제가 발생하기 때문에, CSS를 번들링하기 위해서는 style-loader를 함께 사용해준다.

style-loader는 자바스크립트로 변경된 스타일을 동적으로 돔에 추가하는 로더이다. 먼저 설치를 해보자.

$ npm install -D style-loader

그리고 웹팩 설정에 로더를 추가한다.

webpack.config.js

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

use에 배열로 설정하면 뒤에서부터 앞의 순서 즉, css-loader → style-loader 순서대로 로더가 동작하게 된다. 이후, 다시 html을 열어 확인해보면 CSS가 잘 적용되어 나타난 모습을 확인할 수 있다.

 

 

file-loader

CSS 파일 뿐만 아니라 소스코드에서 사용하는 모든 파일을 모듈로 사용할 수 있다. file-loader는 파일을 모듈 형태로 지원하고 웹팩 아웃풋에 파일을 옮겨준다. 이미지 파일(png)을 모듈로 사용하는 경우를 살펴보자.

일단 로더를 설치하자.

$ npm install -D file-loader

그리고 웹팩 설정 파일에 로더를 추가한다.

webpack.config.js

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

웹팩이 .png 파일을 찾으면 file-loader를 실행하도록 설정했다. 로더가 작동하고 나면 아웃풋에 설정한 경로로 이미지 파일이 복사된다. 복사된 파일은 자동으로 파일 이름이 해쉬코드로 변경되는데, 이는 캐시 갱신을 위한 처리로 보인다. 하지만 이 상태로 브라우저에 로딩하면 경로 문제로 인해 이미지를 제대로 로딩하지 못할 것이다.

file-loader 옵션을 수정하여 경로를 바로 잡아주자.

webpack.config.js

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

publicPath 옵션은 file-loader가 처리하는 파일을 모듈로 사용할 때 경로 앞에 추가되는 문자열이다. output에 설정한 dist 폴더에 이미지 파일이 복사되기 때문에 위와 같이 설정했다. 파일을 사용하는 곳에서 publicPath를 앞에 붙여서 사용할 것이다.

또한 name 옵션을 통해 로더가 파일을 아웃풋에 복사할 때 이름.확장자?해쉬값으로 사용하도록 했다.

 

 

url-loader

사용하는 이미지 개수가 많다면 네트워크 리소스를 사용하는데 부담이 있고 사이트 성능에도 영향을 줄 수 있다. 만약 한 페이지에서 작은 이미지를 여러개 사용한다면 Data URI Scheme를 이용하는 것이 더 나을 수 있다. 이미지를 Base64로 인코딩하여 문자열 형태로 소스코드에 넣는 형식인데, url-loader가 이런 처리를 자동화해준다.

먼저 로더를 설치하자.

$ npm install -D url-loader

그리고 웹팩 설정 파일에 추가해주자.

webpack.config.js

{
  test: /\.png$/,
  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를 적용하겠다는 의미이다. 빌드를 하고 나면, 5kb 미만 파일은 Data URL 즉, 문자열 형태로 변경되게 된다.

 

---

출처: [인프런] 프론트엔드 개발환경의 이해와 실습