목차
# 1. Style sheet 모듈로 불러오기
1. [src] > style.css 파일 생성 , App에서 import 하기
CSS
h1 {
color: orange;
}
2. css loader , style-loader 설치
- yarn add -D css-loader style-loader
css- loader ( css 모듈로 불러오기 )
- 기능: css-loader 이 로더는 CSS 파일을 모듈로 변환하여 JavaScript에서 import할 수 있게 해줍니다.
- 사용 예: import ‘./style.css’
style-loader ( style 태그로 만들어 head에 삽입하기 )
- 기능: style-loader는 JavaScript에서 불러온 CSS를 <style> 태그로 만들어 브라우저의 <head> 부분에 삽입합니다. css-loader로 변환된 CSS를 실제로 DOM에 적용하는 작업을 수행
- 사용 예: JavaScript를 통해 불러온 CSS를 런타임에 동적으로 스타일 태그로 페이지에 삽입합니다.
차이
- css-loader는 CSS를 JavaScript 모듈로 변환하는 과정을 담당합니다. 웹팩이 CSS 파일을 이해하고 사용할 수 있도록 JavaScript로 변환하는 역할을 합니다.
- style-loader는 변환된 CSS를 실제로 페이지에 적용하는 역할을 합니다. JavaScript를 통해 불러온 CSS를 스타일 태그로 만들어 DOM에 삽입합니다.
결합 사용
일반적으로, webpack 설정에서 이 두 로더는 함께 사용됩니다.
webpack의 로더 체인에서 style-loader는 css-loader보다 앞에 위치해야 합니다.
JAVASCRIPT
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] // style-loader가 먼저 적용됨
}
]
}
};
.
[요약]
- css-loader : css파일을 js를 사용해 모듈로 불러오는 역할
- style-loader: 모듈로 불러온 css파일을 index.html의 head태그 내부에 심어주는 역할
- 즉, import ./style.css 형태로 특정 js파일에 css가 적용되고, 이것이 index.html에 적용되게끔 만들어주는 역할
# 2. images , svgs 렌더링을 위한 웹팩 구성하기
Image 형식 파일 렌더링 설정하기
1) import webpackImg from ‘./webpack.jpeg’ ⇒ TS에러 발생 ⇒ 해결책은?
2) add declarations.d.ts 파일 추가하여 해당 확장자에 대한 타입 정의해주기
SQL
declare module '*.png'
- App.tsx
JAVASCRIPT
import './styles.css'
import webpackImg from ‘./webpack.jpeg’ // 이 부분이 가능하게 만들어줌
export const App = ()=>{
return <>
<h1>React Typescript Webpack Starter Template</h1>
<img src={webpackImg} alt="logo" width="200" height="200"/>
</>
}
- Webpack 5에서는 이미지와 같은 자산(assets)을 처리하기 위한 내장 모듈인 Asset Modules를 도입했습니다.
- loaders , plugin 설치 필요 없이 webpack 설정 파일만 수정해주면 됨
3) webpack.config.js 설정 추가해주기
TYPESCRIPT
module.exports = {
// ... 기타 웹팩 설정 ...
module: {
rules: [
{
**** test: /\\.(png|svg|jpg|jpeg|gif)$/i, ****
****type: 'asset/resource'**,**
},
],
},
};
SVG 형식 렌더링 설정하기
1) SVG 타입 추가
- declarations.d.ts → declare module ‘*.svg’
ASPECTJ
declare module '*.svg' // 이제 SVG파일을 img태그 소스로 사용 가능
2) webpack.config.js 인라인 모듈 타입의 설정 추가
JAVASCRIPT
{
test: /\\.(woff(2)?|eot|ttf|oft|svg|)$/,
type: 'asset/inline',
}
- 이제 SVG파일을 변수로 img태그 소스에 할당할 수 있습니다.
Reference
https://www.youtube.com/watch?v=gtZs1BPgf6Y&list=PLC3y8-rFHvwiWPS2RO3BKotLRfgg_8WEo&index=2
'Webpack' 카테고리의 다른 글
| Webpack 이해하기 (6) - Prettier 코드 포매터 적용 (0) | 2023.12.21 |
|---|---|
| Webpack 이해하기 (5) - ESLint rule 적용 (0) | 2023.12.21 |
| Webpack 이해하기 (4) - react refresh 기능 추가하기 (1) | 2023.12.20 |
| Webpack 이해하기 (3) - 다중 환경에서의 웹팩 설정 (0) | 2023.12.20 |
| Webpack 이해하기(1) - Webpack5와 Typescript를 이용한 react app basic setup (0) | 2023.12.19 |
# 1. Style sheet 모듈로 불러오기
1. [src] > style.css 파일 생성 , App에서 import 하기
CSS
h1 {
color: orange;
}
2. css loader , style-loader 설치
- yarn add -D css-loader style-loader
css- loader ( css 모듈로 불러오기 )
- 기능: css-loader 이 로더는 CSS 파일을 모듈로 변환하여 JavaScript에서 import할 수 있게 해줍니다.
- 사용 예: import ‘./style.css’
style-loader ( style 태그로 만들어 head에 삽입하기 )
- 기능: style-loader는 JavaScript에서 불러온 CSS를 <style> 태그로 만들어 브라우저의 <head> 부분에 삽입합니다. css-loader로 변환된 CSS를 실제로 DOM에 적용하는 작업을 수행
- 사용 예: JavaScript를 통해 불러온 CSS를 런타임에 동적으로 스타일 태그로 페이지에 삽입합니다.
차이
- css-loader는 CSS를 JavaScript 모듈로 변환하는 과정을 담당합니다. 웹팩이 CSS 파일을 이해하고 사용할 수 있도록 JavaScript로 변환하는 역할을 합니다.
- style-loader는 변환된 CSS를 실제로 페이지에 적용하는 역할을 합니다. JavaScript를 통해 불러온 CSS를 스타일 태그로 만들어 DOM에 삽입합니다.
결합 사용
일반적으로, webpack 설정에서 이 두 로더는 함께 사용됩니다.
webpack의 로더 체인에서 style-loader는 css-loader보다 앞에 위치해야 합니다.
JAVASCRIPT
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] // style-loader가 먼저 적용됨
}
]
}
};
.
[요약]
- css-loader : css파일을 js를 사용해 모듈로 불러오는 역할
- style-loader: 모듈로 불러온 css파일을 index.html의 head태그 내부에 심어주는 역할
- 즉, import ./style.css 형태로 특정 js파일에 css가 적용되고, 이것이 index.html에 적용되게끔 만들어주는 역할
# 2. images , svgs 렌더링을 위한 웹팩 구성하기
Image 형식 파일 렌더링 설정하기
1) import webpackImg from ‘./webpack.jpeg’ ⇒ TS에러 발생 ⇒ 해결책은?
2) add declarations.d.ts 파일 추가하여 해당 확장자에 대한 타입 정의해주기
SQL
declare module '*.png'
- App.tsx
JAVASCRIPT
import './styles.css'
import webpackImg from ‘./webpack.jpeg’ // 이 부분이 가능하게 만들어줌
export const App = ()=>{
return <>
<h1>React Typescript Webpack Starter Template</h1>
<img src={webpackImg} alt="logo" width="200" height="200"/>
</>
}
- Webpack 5에서는 이미지와 같은 자산(assets)을 처리하기 위한 내장 모듈인 Asset Modules를 도입했습니다.
- loaders , plugin 설치 필요 없이 webpack 설정 파일만 수정해주면 됨
3) webpack.config.js 설정 추가해주기
TYPESCRIPT
module.exports = {
// ... 기타 웹팩 설정 ...
module: {
rules: [
{
**** test: /\\.(png|svg|jpg|jpeg|gif)$/i, ****
****type: 'asset/resource'**,**
},
],
},
};
SVG 형식 렌더링 설정하기
1) SVG 타입 추가
- declarations.d.ts → declare module ‘*.svg’
ASPECTJ
declare module '*.svg' // 이제 SVG파일을 img태그 소스로 사용 가능
2) webpack.config.js 인라인 모듈 타입의 설정 추가
JAVASCRIPT
{
test: /\\.(woff(2)?|eot|ttf|oft|svg|)$/,
type: 'asset/inline',
}
- 이제 SVG파일을 변수로 img태그 소스에 할당할 수 있습니다.
Reference
https://www.youtube.com/watch?v=gtZs1BPgf6Y&list=PLC3y8-rFHvwiWPS2RO3BKotLRfgg_8WEo&index=2
'Webpack' 카테고리의 다른 글
| Webpack 이해하기 (6) - Prettier 코드 포매터 적용 (0) | 2023.12.21 |
|---|---|
| Webpack 이해하기 (5) - ESLint rule 적용 (0) | 2023.12.21 |
| Webpack 이해하기 (4) - react refresh 기능 추가하기 (1) | 2023.12.20 |
| Webpack 이해하기 (3) - 다중 환경에서의 웹팩 설정 (0) | 2023.12.20 |
| Webpack 이해하기(1) - Webpack5와 Typescript를 이용한 react app basic setup (0) | 2023.12.19 |
