728x90
웹팩을 사용해보는 과제를 수행했다
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack</title>
</head>
<body>
안녕하세요 웹페이지 포트폴리오 입니다.
</body>
</html>
_config.yml
theme: jekyll-theme-cayman
web-pack 과제
번들링은 여러 제품이나 코드, 프로그램을 묶어서 제공하는 것을 말한다
프론트엔드 개발자에게 번들은 '사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음'이다
webpack은 2022년 7월 현재 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러이다
모듈 번들러란 HTML, CSS, JavaScript등의 자원을 전부 각 모듈로 보고 이를 조합해 하나의 묶음으로 번들링 하는 도구이다
웹팩의 핵심 개념
- Entry: entry point를 기반으로 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낼 수 있음
- Output: 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에게 알려주는 역할 수행
기본 출력 파일의 경우 ./dist/main.js로, 생성된 기타 파일의 경우 ./dist 폴더로 설정됨
- Loaders: webpack은 기본적으로 javascript와 JSON 파일만 이해함
loader를 사용하면 webpack이 다른 유형의 파일을 처리, 유효한 모듈로 변환해 애플리케이션에 사용하거나 디펜던시 그래프에 추가 가능함
- Plugins: 번들 최적화, 에셋 관리, 환경변수 주입 등 수행
플러그인을 사용하기 위해선 require()를 통해 플러그인을 먼저 요청해야함
dist 폴더 코드
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="main.js"></script></head>
<body>
<div id="app"></div>
</body>
</html>src 폴더 코드
//app.css
body {
background-color: blueviolet;
}
//app.js
import {sum} from './math.js';
import './app.css';
import webpackImage from './webpack.png';
window.addEventListener('DOMContentLoaded', ()=> {
const el = document.querySelector('#app');
el.innerHTML = `
<h1>1 + 2 = ${sum(1, 2)}<h1>
<img src="${webpackImage}" alt="webpack" />
`
})
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
//math.js
export function sum(a, b){
return a + b;
}
//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
main: './src/app.js'
},
output: {
path: path.resolve('./dist'),
filename: '[name].js',
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.png$/,
use: [{
loader: 'file-loader',
options: {
// name: '[name].[ext]?[hash]'
}
}]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin(),
]
}'프로그래밍 > 프로젝트' 카테고리의 다른 글
| TDD - Testbuilder 과제 (0) | 2022.08.03 |
|---|---|
| 프로젝트 경험 설명 (0) | 2022.07.28 |
| 구글 클론 코딩 (0) | 2022.07.24 |
| [Backend] 인증/보안 auth-basic-cookie (0) | 2022.07.15 |
| StatesAirline Client part1 (0) | 2022.06.14 |
댓글