안녕하십니까.
노래듣다가 과몰입한 하프 입니다. 🎶
이번에는 번들링을 할 때 파일로딩을 어떻게 하면 좋을지를 알아보도록 하겠습니다.
📝 목차
Module Loading
기본 설정
폴더 구조를 다음과 같이 설정합니다.
📁 webpack-demo
|- 📜 package.json
|- 📜 package-lock.json
|- 📁 dist
|- 📜 index.html
|- 📁 src
|- 📜 index.js (수정)
|- 📜 style.css (추가)
|- 📜 image.jpg (추가)
|- 📜 Pretendard.ttf (추가)
|- 📜 webpack.config.js
기본 설정을 위해, 이미지와 폰트를 먼저 다운 받고, 다음 경로로 이동시켜주세요
/src/Pretendard.ttf (추가)
/src/image (추가)
/src/style.css (추가)
@font-face {
font-family: 'Pretendard';
src: url('./Pretendard.ttf') format("truetype");
}
.hello {
display: flex;
flex-direction: column;
width: 300px;
text-align: center;
border: 1px solid lightgray;
border-radius: 10px;
padding: 20px;
box-sizing: border-box;
color: gray;
font-family: 'Pretendard';
img {
margin-top: 5px;
border-radius: 15px;
}
}
/src/index.js (수정)
import _ from 'lodash';
import './style.css';
import Img from "./image.jpg";
function component() {
const element = document.createElement('div');
// 이 라인이 동작하려면 현재 스크립트를 통해 포함된 Lodash가 필요합니다.
element.innerHTML = _.join(['웹팩(Webpack)', 'Step2'], ' ');
element.classList.add('hello');
// 원래 있던 div 에 이미지를 추가합니다.
const myIcon = new Image();
myIcon.src = Img;
element.appendChild(myIcon);
return element;
}
document.body.appendChild(component());
CSS를 읽을 수 있도록 라이브러리를 설치해줍니다.
//CSS 로드 모듈
npm install --save-dev style-loader css-loader
바로 읽을 수는 없고!.. webpack에서 따로 설정이 필요합니다.
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
//css 로드 모듈
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
//이미지 로드 모듈
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
{
//폰트 로드 모듈
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
}
],
},
};
모두 추가하셨다면 build해서 확인을 해보도록 합시다!
npm run build
이미지와 css, 폰트가 적용이 된것을 볼 수 있습니다!
dist 폴더 경로에도 보면, 이미지와 폰트가 잘 번들링 된것을 볼 수 있습니다!
JSON, CSV 등 기타 파일 읽기
JSON과 CSV 등 파일 형식으로 저장되어 있는 정보를 읽기 위해서는 다른 라이브러리들을 따로 설치해야합니다.
구성은 위에서 했던 진행방식과 같습니다.
npm install --save-dev csv-loader xml-loader
파일 구조는 아래를 참고해주세요!
📁 webpack-demo
|- 📜 package.json
|- 📜 package-lock.json
|- 📁 dist
|- 📜 index.html
|- 📁 src
|- 📜 index.js (수정)
|- 📜 style.css
|- 📜 image.jpg
|- 📜 data.xml (추가)
|- 📜 data.csv (추가)
|- 📜 Pretendard.ttf
|- 📜 webpack.config.js
/src/data.xml (추가)
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Mary</to>
<from>John</from>
<heading>Reminder</heading>
<body>Call Cindy on Tuesday</body>
</note>
/src/data.csv (추가)
to,from,heading,body
Mary,John,Reminder,Call Cindy on Tuesday
Zoe,Bill,Reminder,Buy orange juice
Autumn,Lindsey,Letter,I miss you
/src/index.js (수정)
import _ from 'lodash';
import './style.css';
import Img from "./image.jpg";
import Data from './data.xml';
import Notes from './data.csv';
function component() {
const element = document.createElement('div');
// 이 라인이 동작하려면 현재 스크립트를 통해 포함된 Lodash가 필요합니다.
element.innerHTML = _.join(['웹팩(Webpack)', 'Step2'], ' ');
element.classList.add('hello');
// 원래 있던 div 에 이미지를 추가합니다.
const myIcon = new Image();
myIcon.src = Img;
element.appendChild(myIcon);
console.log(Data);
console.log(Notes);
return element;
}
document.body.appendChild(component());
여기도 마찬가지로 webpack.config.js에 모듈추가가 필요합니다.
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
},
{
test: /\.(csv|tsv)$/i,
use: ['csv-loader'],
},
{
test: /\.xml$/i,
use: ['xml-loader'],
},
],
},
};
결과를 확인해보면!.. 로그탭에 데이터들이 잘 나오는걸 볼 수 있습니다!
이렇게 모듈을 사용해 잘 나오는지 확인해보는걸 진행해봤고
다음에는 HtmlWebpackPlugin을 이용해서, Output을 설정해주는 내용으로 돌아오겠습니다.
'프론트엔드 > 기타' 카테고리의 다른 글
| WebPack5 #2 - 번들링 셋팅 (2) | 2024.06.14 |
|---|---|
| WebPack5 #1 - 핵심 내용 (0) | 2024.06.14 |
