🔧Webpack : file-loader

우선 이미지를 import하기 위해서 아래와 같이 css를 변경해야한다.

body {
  background-image: url(git-logo-icon.png);
}

  우선 yarn의 pnp로 동작을 설정한 나의 프로젝트 파일에선 오류가 실행되지 않고 정상적으로 빌드가 되었다고 나오고 있다. 거기다 브라우저에서는 내가 설정한 image가 제대로 동작하고 있다. 왜그런가 생각해보니 내가 이미 node_modules를 pnp로 전환해서 yarn-berry의 특징인 cache 폴더안에서 이미 file-loader가 존재해서 해결이 되고 있는 것이라고 짐작을 했다. 하지만 나의 추측과는 전혀 무관했다. file-loader를 무시하고 바로 webpack.config파일을 설정하니 그제서야 오류가 발생한 것이다. 따라서 다시 아래와 같이 file-loader를 설정했다.

::CMD

npm install file-loader

yarn install file-loader

 

 

  하지만 webpack.cofing 설정 과정에서 file-loader를 직접 다루려고 하니 file-loader없이 잘 동작하던 빌드가 이미지 처리가 되지 않고 있는 것이다. 확인을 해보니 webpack과 다른 패키지들의 버전 정보가 수업에서 하는 버전과 달라서 발생한 문제였다. webpack 5이상 부터는 file-loader를 포함시켰다는 것이다. 이에 따라 webpack과 나머지 패키지들을 모두 수업에서 다루는 버전으로 다시 맞추고 실행해 보려고 했으나 이전과 같이 style-loader를 찾지 못하는 불상사가 반복되었다. 그래서 수업과는 별개로 최신 버전에 맞춰서 webpack.config를 설정하기로 했다.

//webpack.config.js (5 이상 버전)

  {
    test: /\.png$/,
    type: 'asset/resource'
  }

//webpack.config.js (5 이하 버전)

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

  추가적으로 설명하자면  웹팩 5버전 이상에서는 몇 가지 중요한 변경 사항이 있다. file-loader, url-loader, 및 raw-loader와 같은 로더들은 웹팩 5부터는 자체적으로 포함된 기능으로 대체되었다. 그러나 특정한 경우에는 여전히 file-loader와 같은 로더를 직접 사용해야 하려면 위와 같이 type: 'asset/resource'방식으로 수행하면 된다.

이제 웹팩 버전과 yarn-berry의 호환성 문제는 뒤로하고 dist폴더로 가보면 이미지 파일이 있는 것을 확인 할 수 있다.

dist
├── e6cb70b6c44cc2e8835a.png
└── main.js

  우리가 지정해 놓은 이미지 파일의 파일명이 아닌 해시 값으로 이름이 변경 되어 있다. 웹팩은 빌드가 될 때 마다 이렇게 해시 값으로 파일명이 변경된다. 정적파일의 경우 캐싱 문제를 해결하기 위해서 해시값을 이용한다. 브라우전에서 캐싱을 하는 경우는 이미지 외에도 자바스크립트나 css, 이미지 폰트가 있다. 브라우저는 캐시를 사용하여 동일한 파일을 다시 다운로드하지 않도록 한다. 그러나 파일이 변경되었을 때 브라우저가 최신 버전을 로드하도록 파일 이름에 해시 값을 포함시키면 파일 내용이 변경될 때마다 새로운 파일 이름이 생성되므로 브라우저는 항상 최신 파일을 로드하게 된다.

파일을 이름을 설정할 수 있게 webpack.config에서 설정하면 아래와 같다.

 //webpack.config.js (5 버전 이하)
 
 {
    test: /\.png$/,
    loader: 'file-loader',
    options: {
    	publicPath: './dist/',
        name: '[name].[ext]?[hash]'
    }
  },

 

//webpack.config.js (5 버전 이상)

 {
    test: /\.png$/,
    type: 'asset/resource',
    generator: {
      filename: 'assets/[name].[hash][ext]',
      publicPath: './dist/',
    },
  }

  작성자는 assets폴더 아래에 본래 파일명과 함께 해시값을 부여했다. 그래서 결과적으로 아래와 같은 디렉토리 구조로 dist폴더에 파일들이 설정 된 것을 확인 할 수 있다.

dist
├── assets
│   └── git-logo-icon.e6cb70b6c44cc2e8835a.png
│
├── e6cb70b6c44cc2e8835a.png
└── main.js

main.js에서는 아래와 같이 확인이 가능하다.

//main.js

/** 이하생략 */

...("module.exports = \"./dist/assets/git-logo-icon.e6cb70b6c44cc2e8835a.png\";\n\n//#...

/** 이하생략 */

---

  구버전으로 문제를 해결하지 못한 점이 매우 아쉽지만 최신 버전에 적응을 해야하는 것이 급선무라고 생각이 되어서 이렇게 최신버전으로 수행해 보았다. yarn-berry기반으로 프로젝트를 세팅해서 yarn-berry의 pnp 호환성 문제가 가장 클 것으로 추측이 된다. 아무래도 yarn-berry의 단점이 호환성 문제이기 때문에 최신 버전에 맞게 설정을 할 수 밖에 없었다.

REFERCNE

• https://webpack.kr/guides/asset-modules