favicons-Webpack-plugin을 통해 favicons 이미지 적용하기

문제

프로젝트 도중 Webpack을 통해 번들링 된 결과물을 서버에 띄우니 html head 태그 내에 적용했던 favicons 이미지가 적용되지 않는 문제가 발생함과 동시에 다음과 같은 에러가 발생하였다.

 

MIME type ('text/html') is not a supported stylesheet MIME type

 

해당 에러에 대해서 검색을 해보니,

 

https://stackoverflow.com/questions/55178482/mime-type-text-html-is-not-a-supported-stylesheet-mime-type

MIME type ('text/html') is not a supported stylesheet MIME type

오류를 발생시키는 데에 여러 원인이 있지만 그 중에서 css파일의 경로명이 잘못 지정되어 있을 때가 가장 주된 원인 중 하나였다.

 

처음에는 favicons 이미지에 사용되는 소스의 확장자는 .png 형식이니까 번들링되는 과정에서 file-loader에 의해 불러와 져야 되는게 아닌지 한참을 고민했지만 결과적으로 Webpack의 Plugins과 module의 차이를 정확히 숙지하고 있지 않은 데에서 온 실수였다.

 

file-loader는 모듈이다. 소스코드에서 사용하는 모든 파일을 모듈로 사용하게끔 할 수 있으며 파일을 모듈 형태로 지원하고 웹팩 아웃풋에 파일을 옮겨주는 역할을 한다.

 

즉, loader의 일환인 file-loaer는 파일을 해석하고 변환하는 과정에 관여하여 모듈을 처리하기 때문에 기존에 html head 태그 내에서 link 태그로 이미지를 불러오는 과정에 관여하지 못한 것이다.html과 같은 경우에는 Webpack 번들링 과정에 직접적으로 관여되지 않고 최종 번들링된 결과물을 patch하는 템플릿의 역할을 하기 때문이다.

 

결국 번들링된 결과물의 형태를 바꾸기 위해서는 별도의 plugin이 필요했던 것이다.

 

문제해결

https://www.npmjs.com/package/favicons-webpack-plugin

favicons-webpack-plugin

구글링을 해보니 favicons 적용할 수 있는 별도의 favicons-webpack-plugin이 있어 다음과 같이 코드를 추가하였다.

favicons-webpack-plugin은 지정한 path에 있는 이미지 소스를 별도로 output 폴더에 저장을 한 뒤, 해당 파일의 경로를 자동으로 head 태그 내 link 태그의 href 어트리뷰트에 patch해준다

 

 

const FaviconsWebpackPlugin = require('favicons-webpack-plugin');

				(...)

plugins: [
        new HtmlWebpackPlugin({
            title: 'MovieInfoService',
            template: './template.hbs',
            meta: {
                author: "CHOI",
                description: "This site is where people see a various of movie info and evaluate it",
                viewport: 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1'
            },
            
           (...)
           
        new FaviconsWebpackPlugin('./src/img/favicon.png')
    ]

여기서 플러그인을 적용할 때 다음과 같은 에러가 발생하였는데,

ERROR in FaviconsWebpackPlugin - This FaviconsWebpackPlugin version is not compatible with your current HtmlWebpackPlugin version. Please upgrade to HtmlWebpackPlugin >= 4 OR downgrade to FaviconsWebpackPlugin 2.x

해석 의미 그대로 FaviconsWebpackPlugin은 HtmlWebpackPlugin과 버전이 상응해야 된다는 내용이었다.

현재 프로젝트에 쓰이는 HtmlWebpackPlugin과 같은 경우는 버전 3을 사용하고 있었고 이에 맞는 FaviconsWebpackPlugin의 버전은

2이기 때문에 이로 다운그레이드하고 나니 정상적으로 동작하는 것을 확인하였다.

 

빌드 결과

빌드한 결과 기존에 img 폴더 내에 존재했던 이미지 소스가 번들링 폴더 내에 별도의 파일로 새로 생성되었음을 확인하였다.