webpack (file-loader) v5 이전

file-loader

css 뿐만아니라 소스코드에 사용하는 모든 파일을 모듈로 사용하게끔 할 수 있다. 파일을 모듈 형태로 지원하고 웹팩 아웃풋에 파일을 옮겨주는 것이 file-loader가 하는 일이다.

src 경로에 bg.png파일을 추가하고 main.css에 body 부분을 다음과 같이 수정하고 빌드하면

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

전과 같이 module 에러가 뜨는 것을 확인할 수 있다.

.png파일을 모듈로 인식하지 못하기 때문인데 file-loader를 install 하여 webpack.config.js에 추가해 보자

npm i file-loader

webpack.config.js

rules: [
  ...,
  {
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader'
    ]
  },
  {
    test: /\.png$/,
    use: [
      'file-loader',
    ]
  },
]

추가한 후 빌드하면 정상적으로 빌드되는 것을 확인할 수 있다.

하지만 index.html을 열어보면 파일을 정상적으로 로드하지 못하는 것을 볼 수 있는데

빌드후 파일이 저장되는 dist 디렉토리가 아닌 src에서 파일을 찾기 때문이다. 정상적인 경로에서 파일을 loader하기 위해서 webpack.config.js를 다음과 같이 수정해보자

  {
    test: /\\.png$/,
    loader: 'file-loader',
    options: {
      publicPath: './dist/',
      name: '[name].[ext]?[hash]'
    }
  },

publicPath: 파일로더가 처리하는 파일을 모듈로 사용했을 때 경로 앞에 추가하는 문자열

name: 파일로더가 파일을 output에 복사할 때 사용하는 이름 cache 무력화를 위해서 쿼리 스트링으로 매번 달라지는 hash값을 입력

다시 빌드하고 index.html을 열어보면 정상적으로 이미지를 불러오는 것을 볼 수 있다.

url-loader

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

  {
    test: /\\.png$/,
    loader: 'url-loader',
    options: {
      publicPath: './dist/',
      name: '[name].[ext]?[hash]'
      limit: 2 * 1024,
    }
  },

이와 같이 webpack.config.js 파일을 수정해주면 2kb 미만의 파일은 url-loader가 그 이상의 파일은 file-loader가 처리해 준다.