이미지, 폰트 에셋 구성

1. 이미지 로더 설치

url-loader, file-loader, @svgr/webpack 패키지를 프로젝트에 설치합니다.

패키지 설치

npm install url-loader file-loader @svgr/webpack -D

2. 로더 / 플러그인 구성

module에 이미지 및 웹 폰트 로더(loader)를 구성합니다.

webpack.config.js

module.exports = (_env, argv) => {
  // ...
  return {
    // ...
    module: {
      rules: [
        // 이미지 로더
        {
          test: /\.(jpe?g|png|gif)$/i,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 8192,
                name: 'assets/images/[name].[hash:8].[ext]',
              }
            }
          ]
        },
        // SVG 로더
        {
          test: /\.svg$/i,
          use: ['@svgr/webpack'],
        },
        // 웹폰트 로더
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/i,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: 'assets/fonts/[name].[hash:8].[ext]',
              },
            },
          ],
        },
      ]
    }
  }
}