[FE] Webpack에서 Assets 파일(image, SVG, font)을 빌드할 수 있도록 설정 #45
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
`@svgr/webpack`을 사용하여 SVG 파일 로더 설정 추가
hwinkr
approved these changes
Jul 21, 2024
Comment on lines
+15
to
+32
| { | ||
| test: /\.(png|jpe?g|gif)$/i, | ||
| type: 'asset/resource', | ||
| generator: { | ||
| filename: 'assets/images/[name][hash][ext][query]', | ||
| }, | ||
| }, | ||
| { | ||
| test: /\.(woff|woff2|eot|ttf|otf)$/i, | ||
| type: 'asset/resource', | ||
| generator: { | ||
| filename: 'assets/fonts/[name][hash][ext][query]', | ||
| }, | ||
| }, | ||
| { | ||
| test: /\.svg$/, | ||
| use: ['@svgr/webpack'], | ||
| }, |
There was a problem hiding this comment.
왜 file-loader 과 같은 로더가 없는지 궁금해서 찾아보니까, 웹팩에서 로더를 대체할 4가지 Asset Modules가 나와서 가능했던 것이군요!type 프로퍼티가 file-loader를 대체할 수 있다고 하네요~
Comment on lines
+63
to
+67
| performance: { | ||
| hints: false, | ||
| maxEntrypointSize: 400000, | ||
| maxAssetSize: 400000, | ||
| }, |
There was a problem hiding this comment.
저도 npm run build 하니까, 번들 사이즈 관련 경고를 던져서 사이즈를 늘렸는데, 제 코드를 롤백해야겠군요~
Largopie
approved these changes
Jul 21, 2024
There was a problem hiding this comment.
[P3] 타입 정의할 때 저희가 사용하는 이미지 파일 확장자에 대해서만 정의해도 괜찮지 않을까..? 하는 생각이 잠시 스쳐지나가서 사소한 의견 남겨봅니다!
There was a problem hiding this comment.
@Largopie
낙타🐫 좋은 의견 공유 감사합니다😊 어떤 이미지 파일 확장자를 사용할 건지도 함께 정해봐야겠군요!
현재는 추후 다양한 이미지 파일 확장자를 사용할 가능성을 고려해 환경 세팅 단계에서 미리 정의해 두었습니다. 일단 1차적으로 기능 구현이 모두 끝난 뒤, 실제 사용하지 않는 확장자는 제거하는 방향으로 진행하려 합니다!
Comment on lines
+15
to
+32
| { | ||
| test: /\.(png|jpe?g|gif)$/i, | ||
| type: 'asset/resource', | ||
| generator: { | ||
| filename: 'assets/images/[name][hash][ext][query]', | ||
| }, | ||
| }, | ||
| { | ||
| test: /\.(woff|woff2|eot|ttf|otf)$/i, | ||
| type: 'asset/resource', | ||
| generator: { | ||
| filename: 'assets/fonts/[name][hash][ext][query]', | ||
| }, | ||
| }, | ||
| { | ||
| test: /\.svg$/, | ||
| use: ['@svgr/webpack'], | ||
| }, |
Largopie
pushed a commit
that referenced
this pull request
Jul 22, 2024
* chore: 이미지 파일 모듈 선언 추가 * feat: 이미지 파일 로더 및 성능 설정 추가 * feat: 폰트 파일 로더 설정 추가 * feat: SVG 파일 로더 설정 추가 `@svgr/webpack`을 사용하여 SVG 파일 로더 설정 추가
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
관련 이슈
작업 내용
파일 모듈 선언: 이미지 및 폰트 파일 모듈을 선언
이미지 파일 로더 설정: png, jpeg, gif 파일을 처리하기 위한 로더를 추가하고,
assets/images/경로로 저장되도록 설정폰트 파일 로더 설정: woff, woff2, eot, ttf, otf 폰트 파일을 처리하기 위한 로더를 추가하고,
assets/fonts/경로로 저장되도록 설정SVG 파일 로더 설정:
@svgr/webpack을 사용하여 SVG 파일을 React 컴포넌트로 변환하는 로더를 추가성능 설정 조정: 이미지와 폰트 파일의 크기에 대한 성능 경고를 비활성화하고, 자산 및 엔트리 포인트 크기 제한을 400,000 바이트로 조정 (기본값 250,000 바이트) 이 변경은
npm run build및npm run prod실행 시 발생하는 크기 초과 경고를 해결하기 위함입니다.png, svg 적용해본 결과 (사용된 png, svg는 올리지 않았습니다.)
특이 사항
npm run build/npm run prod명령어를 실행할 때, png 이미지 파일 1장이 포함된 결과물에서 다음과 같은 두 가지 성능 관련 경고가 발생합니다.우선적으로 성능 설정 변경(250,000 바이트 → 400,000 바이트)을 하여 자산 크기 및 엔트리 포인트 크기 초과 경고를 제거했습니다.
웹 성능에 영향을 미칠 수 있으므로, 향후 성능 최적화를 고려할 필요가 있습니다.
참고링크
리뷰 요구사항 (선택)
해당 작업과 관련된 내용을 notion에 기록해 보았습니다. notion 링크