File 로더

File Loader 구성

file-loader 패키지를 프로젝트에 설치한 후, Webpack 구성 파일의 모듈 규칙 안에 로더를 설정합니다.

패키지 설치

npm i file-loader -D

webpack.config.js

webpack.config.js

  module: {
    rules: [
      {
        // 이미지 포멧: PNG, JP(E)G, GIF, SVG, WEBP
        test: test: /\.(png|jpe?g|gif|svg|webp)$/i,,
        use: ['file-loader']
      }
    ]
  }
}

이미지 모듈 작성

섬 근처 수역에 서있는 사람 이미지 파일을 다운로드 받은 후, 에셋 디렉토리(src/assets) 안으로 이동시킵니다. 그런 다음 예제 디렉토리(src/example) 안에 imageIsland.js 파일을 생성한 후 DOM.createElement 모듈을 사용해 이미지를 동적으로 생성하는 코드를 작성합니다.

그리고 엔트리 파일(src/index.js)에 이미지 파일 모듈을 불러와 DOM.render 모듈을 사용해 UI에 렌더링 합니다.

src/example/imageIsland.js

import islandImage from '../assets/landscape-island.png'
import { createElement } from '../modules/DOM'

/* -------------------------------------------------------------------------- */

export default function imageIsland() {
  return createElement('img', {
    src: islandImage,
    alt: '섬 근처 수역에 서있는 사람',
  })
}

src/index.js

import renderIsland from './example/imageIsland'


render(renderIsland(), rootNode)

모듈 번들링

bundle NPM 명령을 사용해 모듈을 번들링 하면 JS 파일 뿐만 아니라, 이미지 파일까지 모두 번들링 됩니다.

npm run bundle

# 번들링 출력 결과
assets by status 590 KiB [cached] 1 asset
asset main.js 11.9 KiB [compared for emit] (name: main)
runtime modules 1.74 KiB 5 modules
cacheable modules 3.4 KiB
  modules by path ./src/modules/*.js 2.35 KiB
    ./src/modules/LOGGER.js 742 bytes [built] [code generated]
    ./src/modules/DOM.js 1.62 KiB [built] [code generated]
  ./src/index.js 658 bytes [built] [code generated]
  ./src/example/imageIsland.js 339 bytes [built] [code generated]
  ./src/assets/landscape-island.png 80 bytes [built] [code generated]
webpack 5.22.0 compiled successfully in 96 ms

번들링 된 결과물은 배포 디렉토리(dist) 안에 생성됩니다.

번들링 결과

.
├── dist/ # Webpack 번들링 배포(결과물)
│   ├── 861b3c3b709916519ce293d61ec0b0aa.png
│   └── main.js
├── src/
│   ├── assets/
│   │   └── landscape-island.png
│   ├── example/
│   │   └── imageIsland.js
│   ├── modules/
│   │   ├── DOM.js
│   │   └── LOGGER.js
│   └── index.js
├── index.html
├── node_modules
├── package-lock.json
├── package.json
└── webpack.config.js

이미지 파일 "이름", "해시", "확장자" 값을 출력하려면 use 옵션을 다음과 같이 변경합니다.

// 이미지 파일 로더
{
  test: /\.(png|jpe?g|gif|svg|webp)$/i,
  use: {
    loader: 'file-loader',
    options: {
      name: '[name].[contenthash].[ext]',
    },
  },
},

Public 경로 설정

번들링 된 결과로 처리된 앱을 웹 브라우저에서 확인하면 동적으로 생성된 이미지 모듈 코드가 다음과 같습니다. <img/> 요소의 src 속성을 보면 웹 주소(URI)를 확인할 수 있습니다. 전체 도메인 경로가 사용되었네요.

src/index.html

<img 
  src="http://localhost:5500/meetup(offline)/week01/02-setting-webpack/dist/861b3c3b709916519ce293d61ec0b0aa.png" 
  alt="섬 근처 수역에 서있는 사람" />

Webpack 구성 파일에 publicPath 설정을 추가해 공용 디렉토리(모든 에셋의 기본 위치)를 설정해봅니다.

webpack.config.js

module.exports = {
  output: {
    // ...
    publicPath: 'dist/'
  }
}

설정 후 다시 모듈 번들링 하면, 이미지 경로가 공용 디렉토리에 상대적인 위치로 설정된 것을 확인할 수 있습니다.

src/index.html

<img 
  src="dist/861b3c3b709916519ce293d61ec0b0aa.png" 
  alt="섬 근처 수역에 서있는 사람" />

공용 디렉토리 위치를 호스팅 URL로 입력할 수도 있습니다.

module.exports = {
  output: {
    publicPath: 'https://my-host.io/'
  }
}

참고

Asset Management | webpackwebpack

Public Path | webpackwebpack