frontend 개발을 시작하면 웹팩이라는 단어에 대해서 정말 많이 들어보셨을거에요!!
저도 한창 프로그래밍을 배울 때 웹팩을 진짜 많이 들어봤는데 쉽게 그 개념이 정리되지 않았습니다.
그러던 중 youtube 강의를 발견하게 되었고 그 강의를 들으면서 정리한 내용들을 공유해보도록 하겠습니다.
웹팩이란 무엇인가
번들링은 개발을 진행할 때는 여러개로 나누어서 개발하고 서버에 배포 시 하나로 묶어서 배포하는 것을 말합니다.
모듈 번들러는 번들링을 하는 도구를 뜻합니다.
⇒ 번들링을 사용하는 이유는 그만큼 서버로 요청하는 개수가 줄어들어서 사용자 경험을 향상 시킬 수 있기 때문이죠
웹팩 webpack 은 모듈 번들러의 가장 대표적인 예시이며
간단한 예제 파일을 통해서 웹팩을 사용하는 이유를 알아보도록 하겠습니다.
우선 html 하나의 파일에서 여러개의 js 파일을 참조해보도록 하겠습니다.
var number = 20;
export default numbera.js b.js c.js 파일에는 각 10,20,30의 값이 number에 할당 되어있습니다.
이렇게 html에서 여러개의 파일을 참조 했을 때 중복되는 변수에서 문제가 생겨 가장 마지막에 할당된 값으로 출력됩니다.
⇒ 이러한 문제를 해결하기 위해 ES6에서 추가된 문법 이용하는데 그것이 바로 모듈 시스템 입니다.
이렇게 모듈 시스템을 활용하면 각각의 값을 따로 불러올 수 있습니다.
네트워크 탭에서 살펴 보면 각각의 파일을 따로 따로 불러오는 것 또한 확인 할 수 있습니다.
이번에는 a.js 파일의 형태를 조금 바꿔보도록 하겠습니다.
import number1 from "./a-1.js"
import number2 from "./a-2.js"
var number = number1 + number2
export default number그리고 a.js 파일에서 불러오는 a-1.js a-2.js 파일을 생성합니다.
//a-1
var number = 100;
export default number//a-2
var number = 200;
export default number이 다음 a.js 파일에서 두 파일을 불러오면
import 하는 파일의 개수가 늘어난 것을 볼 수 있고 그 개수가 점점 늘어날수록 계속 불필요한 시간들이 소모됩니다.
⇒ 이때 여러개의 파일을 하나로 묶어서 보낸다면 이 낭비되는 시간이 줄어들 것입니다.
이것이 저희가 웹팩을 사용하는 이유죠!!
웹팩을 사용하기 전 파일 구조 변경
웹팩을 사용하기 전에 파일 구조를 조금 변경하고 간단한 기능을 추가해보도록 하겠습니다.
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 src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script> -->
<script type="module" src="./src/index.js">
</script>
</head>
<body>
<button type="button" id="button-a">a_number</button>
<button type="button" id="button-b">b_number</button>
<button type="button" id="button-c">c_number</button>
<div id="display"></div>
</body>
</html>index.js
import a_number from './a.js'
import b_number from './b.js'
import c_number from './c.js'
console.log('number: ', a_number)
console.log('number: ', b_number)
console.log('number: ', c_number)
const $buttonA = document.querySelector("#button-a")
const $buttonB = document.querySelector("#button-b")
const $buttonC = document.querySelector("#button-c")
const $display = document.querySelector("#display")
$buttonA.addEventListener('click',function(){
$display.textContent = a_number
})
$buttonB.addEventListener('click',function(){
$display.textContent = b_number
})
$buttonC.addEventListener('click',function(){
$display.textContent = c_number
})
위의 코드는 각 버튼을 클릭했을 때 number의 값을 아래에 출력하는 간단한 예제 코드입니다.
웹팩 설치하기(node.js가 설치되어있다는 가정하에 진행)
node가 설치되었다고 가정하고 진행하기때문에 node.js가 설치 되어있지 않으신 분들은 아래에 들어가 node를 설치해주시길 바랍니다.
node.js 설치하기
터미널에서 아래의 명령어를 순차적으로 따라하시면 됩니다.
초기화 진행
npm init -y
→ package.json 파일 생성
웹팩 설치
npm install --save-dev webpack webpack-cli
웹팩 실행
npx webpack --entry ./src/index.js --output-path ./dist
→ dist 폴더 내 main.js 파일 생성 : 압축된 상태(띄어쓰기 적용 X)
npx webpack --entry ./src/index.js --output-path ./dist --mode development
→ dist 폴더 내 main.js 파일 생성 : 압축 해제된 상태(띄어쓰기 적용 O)
- entry 뒤에 파일 경로는 모듈을 시작할 위치를 나타냄. index.js 파일에서부터 시작하여 하나씩 타고 들어가면서 필요한 파일을 탐색
- output 뒤에 경로는 번들링할 파일을 생성해 위치시키는 장소
웹팩으로 생성한 파일을 가져옴
script type="module" src="./dist/main.js"></script>
위에서 여러개의 파일을 불러온 것과 달리 main.js 파일 하나만을 가져온 것을 알 수 있습니다.
기능은 위에서 따로 불러왔던 것과 똑같이 동작합니다.
환경 설정 파일을 이용한 웹팩 적용
이렇게 직접 할 수도 있지만 환경 설정 파일을 이용해서 웹팩을 적용시킬 수도 있습니다.
webpack.config.js 파일 생성
const path = require('path');
module.exports = {
mode: 'production', //development
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};명령어 입력
npx webpack
→ 위에서 생성한 main.js 파일을 삭제한 뒤 진행하면 위 코드에서 filename에 지정한 값으로 똑같은 작업이 수행됩니다.
✔ 이때 자주 사용하는 명령어는 package.json 파일에 script 로 등록해두는 것이 좋음
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"bulid" : "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
}
}script 등록 후 bundle.js 파일 삭제, 다시 실행
npm run bulid
환경 설정 파일을 통해서도 똑같이 작동하는 것을 알 수 있습니다.
현재는 예제파일의 개수가 적어서 그렇게 많은 차이가 없는 것처럼 보이지만, 개발 환경에서 적용하게 된다면 웹팩을 활용하기 전/후의 차이가 엄청 나다는 것을 알 수 있을 것입니다.
정리하기
웹팩은 배포하기 전에 번들링하는 도구 !!
개발 편의성이나 재사용, 유지보수 측면에서 소스코드를 모듈별로 분리해서 개발을 한 후,
배포할 때는 dist 디렉토리에 번들링을 한 후 그 파일만 배포를 하는 것 !
src 폴더 내에 있는 것은 배포할 필요 없고 dist 폴더 내에 있는 파일만 배포하는 것이며
웹팩은 자바스크립트 파일뿐만 아니라 이미지, css 파일 등 다양한 데이터를 변환할 수 있습니다.
웹팩은 여러개의 파일을 하나의 파일로 묶어주는 모듈 번들러
프론트엔드에서 서버로 요청할 때 http 요청 개수를 줄여줌으로써 퍼포먼스를 확장하고 공백과 같은것을 줄임으로써 리소스를 최적화할 수 있습니다.
⇒ 모듈 번들러 사용시 사용자 경험이 더 좋아질 수 있다는 장점이 있습니다.
참고자료
