개요
Webpack...
정말 많이 사용하고 velog에 따로 정리할 만큼 공부했지만,
자신있게 100% 다 안다고는 말 못 하는 어려운 녀석이다.
이번 고민은 Outlook 프로젝트를 새롭게 분리하면서 시작되었다.
특히 Outlook 프로젝트는 MS에서 제공하는 Outlook 프로젝트 빌드 방법이 따로 있어서 더 까다로웠던 거 같다.
png, jpg, jpeg 설정하기
많이 사용되는 이미지 파일의 확장자인 png, jpg, jpeg를 사용하기 위해서는
원하는 경로에 이미지를 담을 폴더를 생성하고
file-loader 라이브러리를 설치해야한다.
yarn add -D file-loader
그 후, 아래 코드 예시와 같이 webpack.config.js 파일에서 module.exports 안 module > rules 설정에서 file-loader 설정들을 추가하면 된다.
module: {
...
{
test: /\.(png|jpg|jpeg|gif|ico)$/,
type: 'asset/resource',
generator: {
filename: 'assets/[name][ext][query]',
},
},
],
},그럼 svg는?
위 코드 예시를 보면 개발에 자주 사용되는 svg 파일 관련 설정이 없는것을 확인할 수 있다.
svg 또한 위와 같은 방법으로 svg loader를 설치하고
test: /.(png|jpg|jpeg|gif|ico)$/,
설정에 svg를 넣어봤지만 svg 파일들이 불러와지지 않았다.
그렇기 때문에 다음과 같은 방법으로 해결하였는데
우선 아래 코드 예시와 같이 기존의 file loader에 name 설정을 다르게 변경해서 svg 만의 설정을 추가해 주는것이였다.
{
test: /\.(svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'assets/[name].[ext][query]',
},
},
],
}항상 느끼지만 프로젝트 세팅은 힘들지만 하고 나면 간단한해 보인다...ㅠ
전체 코드 예시
module: {
rules: [
{
test: /\.jsx?$/,
use: [
'react-hot-loader/webpack',
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
],
exclude: /node_modules/,
},
{
test: /\.html$/,
exclude: /node_modules/,
use: 'html-loader',
},
{
test: /\.(png|jpg|jpeg|gif|ico)$/,
type: 'asset/resource',
generator: {
filename: 'assets/[name][ext][query]',
},
},
{
test: /\.(svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'assets/[name].[ext][query]',
},
},
],
},
{ test: /\.css$/i, use: ['style-loader', 'css-loader'] },
],
}