favicons-webpack-plugin을 copy-webpack-plugin으로 리팩토링하기

https://choi95.tistory.com/131

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

---

이전 포스팅에서 meta 데이터에 파비콘 이미지 소스를 patch하기 위해 favicons-webpack-plugin을 사용하였다.

하지만 다음과 같이 크게 2가지 원인으로 이를 copy-webpack-plugin으로 대체하기로 하였다.

1. 테스트 용도로 지정한 favicon 이미지가 path를 수정하여도 그대로 웹 상에서 랜더링되는 문제가 있었다. build를 할 경우 assets 폴더 내에는 새롭게 추가한 이미지 소스가 제대로 저장이 되어 있는데 dev server open을 하여 웹 상에서 확인해 보면 바뀌기 직전의 이미지 소스가 그대로 남아있다. 해당 문제에 대해서 정확한 원인을 찾지 못하였는데 만약에 찾게 되면 이후 추가 포스팅을 해야겠다.
2. favicon에 사용되는 이미지는 favicon에만 사용되는 것이 아니라 html 문서의 메타 정보에 오픈 그래프(Open Graph)에서도 사용될 이미지이다. 즉, 이미지가 공유되어야 하는데 favicons-webpack-plugin을 사용하게 될 경우 favicon 기능에만 종속되기 때문에 copy-webpack-plugin을 사용하기로 하였다.

Open Graph

• 콘텐츠의 요약 내용이 SNS에 게시되는데 최적화된 데이터를 가지고 갈 수 있도록 설정하는 것

Preview

 

copy-webpack-plugin 사용하기

https://webpack.js.org/plugins/copy-webpack-plugin/

CopyWebpackPlugin | webpack

copy-webpack-plugin은 특정한 디렉터리나 파일을 복사해 번들링 된 폴더 내에 경로로 삽입하는 플러그인이다.

해당 플러그인을 적용하기 위해 다음과 같이 코드를 수정하였는데

const CopyWebpackPlugin = require('copy-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 CopyWebpackPlugin([ { from: 'src/img/logo', to: 'logo/' } ]) ]

Copy Plugin has been initialized using an options object that does not match the API schema. - options[0] misses the property 'patterns'.

 

위와 같은 오류가 발생하였다.
해당 문제를 구글링하여 스택 오버 플로우에서 찾아보니,
https://stackoverflow.com/questions/61937054/npm-run-dev-fails-validationerror-invalid-options-object

npm run dev fails : ValidationError: Invalid options object

This is not an issue with webpack or webpack-dev-server itself, but with the copy-webpack-plugin plugin.
With the update to the 6.x major version came a breaking change: instead of just passing the array with the config patterns directly to the CopyWebpackPlugin constructor, your now have to wrap it in the patterns property of an object and pass that.

 

즉, webpack 자체의 문제가 아닌 copy-webpack-plugin이 버전 6 이상부터는 patterns 프로퍼티로 한번 더 감싸줘야 된다는 내용이었다.
이에 코드를 다음과 같이 수정하였더니 문제 없이 작동하였다.

const CopyWebpackPlugin = require('copy-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 CopyWebpackPlugin({ patterns: [ {from: 'src/img/logo', to: 'logo/'} ] }) ]

---

빌드 결과

copy-webpack-plugin은 지정한 path 내에 있는 모든 리소스들을 복사하기 때문에 디렉터리를 img 전체에 타겟을 둔다면 로고 외에 쓰이지 않는 기타 이미지 소스들까지 복사해 올 것이다.
이를 위해 하위 디렉터리 logo를 별도로 생성해 준 뒤 해당 디렉터리를 타겟으로 수정하였다.