Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE] CopyWebpackPlugin을 사용하여 favicon 적용 문제 해결 #349

Merged
merged 2 commits into from
Sep 20, 2024
Merged

[FE] CopyWebpackPlugin을 사용하여 favicon 적용 문제 해결 #349

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5de9bac
chore: copy-webpack-plugin 추가
Yoonkyoungme Sep 17, 2024
6383e98
chore: favicon 파일들을 빌드 디렉토리로 복사
Yoonkyoungme Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion frontend/webpack.common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
const path = require('path');
const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const DotenvWebpackPlugin = require('dotenv-webpack');

const { sentryWebpackPlugin } = require('@sentry/webpack-plugin');
const webpack = require('webpack');

module.exports = () => ({
entry: './src/index.tsx',
Expand Down Expand Up @@ -69,6 +71,9 @@ module.exports = () => ({
new HtmlWebpackPlugin({
template: 'public/index.html',
}),
new CopyWebpackPlugin({
patterns: [{ from: 'public/assets/favicons', to: 'assets/favicons' }],
}),
Comment on lines +74 to +76
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Q]

궁금한 점이 있어서 여기 남겨봅니다!

기본적으로 src 하위에서 번들링을 진행하기 때문에 favicon은 번들 대상에 제외된다고 작성해주셨습니다! 그렇다면 src 하위로 favicon을 배치하면 함께 번들링이 되나요?

Copy link
Contributor Author

@Yoonkyoungme Yoonkyoungme Sep 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

네 맞습니다! favicon 파일들을 src 디렉토리로 이동하면 웹팩의 기본 처리 대상에 포함될 수 있습니다.

만약 src 디렉토리로 favicon 관련 파일들을 이동하려면 몇 가지 추가 작업이 필요합니다.

  1. 파일 처리 규칙 추가
    현재 webpack.common.js 파일에는 ico, webmanifest, xml 파일을 처리하는 규칙이 없으므로, 이를 설정해줘야 합니다.

  2. CopyWebpackPlugin 제거
    favicon 관련 파일들을 src 디렉토리로 이동하고 위의 설정을 적용하면 CopyWebpackPlugin을 사용할 필요가 없어집니다.

여기까지 읽으면 “src에 넣는 것이 더 간편하지 않을까?” 라는 의문이 생길 수 있을 것 같아요.
하지만 favicon을 src가 아닌 public에 위치시킨 이유는 두 가지가 있었습니다.

  1. 일반적인 관례
    일반적으로 favicon은 웹사이트의 루트에 위치합니다. Create React App(CRA)이나 Vite와 같은 주요 프레임워크들도 public 디렉토리에 favicon을 위치시키고 있습니다.
  2. src와의 구분
    src 디렉토리는 주로 애플리케이션의 소스 코드와 컴포넌트에서 직접 import하여 사용하는 자원들을 위한 것입니다. 반면, favicon은 HTML에서 직접 참조되므로, src와 구분하여 public에 관리하는 것이 더 명확하다고 생각했습니다.

@hwinkr @Largopie 혹시 틀린 내용이 있거나 좀 더 논의하고 싶은 부분이 있다면 편하게 코멘트 남겨주세요 :)

Copy link
Contributor

@Largopie Largopie Sep 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

빙봉GPT 친절한 답변 감사드립니다~!

public 하위 폴더에는 정적 폴더를 위치시키는 것이 거의 정형화가 되어있기 때문에 public 하위 폴더로 배치하는 것은 문제가 되지 않으나, src 하위에 있더라도 Tree Shaking에 의해서 번들링에서 제외가 되지 않을까 싶어서 남긴 코멘트였습니다!

저번에 미션을 진행하면서 말했지만, 폰트같은 경우에는 번들에서 제외가 되는 현상이 있었어서 혹시나 싶은 마음에 남겼습니다요~!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

favicon은 HTML에서 직접 참조되므로, src와 구분하여 public에 관리하는 것이 더 명확하다고 생각했습니다.

이 의견이 상당히 공감됩니다! 고생하셨어요~

new ForkTsCheckerWebpackPlugin(),
new DotenvWebpackPlugin(),
sentryWebpackPlugin({
Expand Down