Webpack

React

[Webpack] 웹팩 환경에서 favicon 추가하는 방법

Intro환경 : React + Webpackfavicon 파일 경로 : src/assets/favicon/favicon.ico   HtmlWebpackPlugin을 사용하는 경우HtmlWebpackPlugin 플러그인을 사용한다면 favicon 경로를 설정하는 것 만으로 간단하게 적용할 수 있다. 다만, 단일 favicon만 처리 가능하다.장점: 설정이 간단함장점: 자동으로 favicon을 처리함단점: 단일 favicon만 처리 가능// webpack.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin');const path = require('path');module.exports = { // ... 다른 설정들 plugins: [ ..

React

[React] SVG 불러오기 (Webpack5 설정 + SVGR)

개발환경React 18Typescript 4Webpack 5styled-componentsSVGR 원래는 React에서는 SVG를 사용할 때 아래와 같은 방법을 주로 사용했다.import { ReactComponent as Logo } from "assets/images/logo.svg";  그러나 Webpack5, Typescript 등 새로운 환경에서는 기존 방법이 잘 작동하지 않아 SVGR 라이브러리를 설치하여 사용하고 있다. 그러면서 아래와 같은 문법을 주로 사용하여 SVG를 호출하고 있었다.import CancelSvg from "assets/images/cancel.svg";  위와 같은 방법으로 잘 사용하고 있었으나 체트박스 컴포넌트를 만들면서 background-image에 url을 넣는 ..

캐럿노트
'Webpack' 태그의 글 목록