웹팩은 여러 .js, .sass, .css 파일들을 번들링 해줌으로써 웹페이지의 속도와 용량을 최적화 해주는 역할을 한다.
우선 임시로 파일을 만들어보자
최종 루트 폴더
index.html
<html>
<body>
<h1>Hello webpack!</h1>
<div id="root"></div>
</body>
</html>source 폴더
hello.js
var word = 'hello';
export default word;
// 수출한다 기본으로 변수를world.js
var word = 'word';
export default word;
// 수출한다 기본으로 변수를index.js
import hello_word from './hello.js';
// 수입하다 변수명 어디서? 해당루트
import world_word from './world.js';
// 수입하다 변수명 어디서? 해당루트
document.querySelector('#root').innerHTML = hello_word + ' ' + world_word;
//도큐먼트에 요소선택(아이디태그 root).HTML내 내용추가해당 디렉토리 폴더에 웹팩을 설치
먼저 해당 폴더 터미널을 열고 해당 명령어를 입력한다
npm init -y명령어를 입력하고 난 뒤 pakage.json 이라는 json 파일이 생성된다
*pakage.json 기본 구조
{
"name": "template_wp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
통합 터미널에 필요한 패키지를 설치해보자
기본적인 패키지를 설치해보자 터미널에 명령어를 입력한다.
npm i -D webpack webpack-cli*npm[설치][개발자모드][webpack][webpack-cli]
webpack : 실제 기능을 담당하는 기본 패키지다.
webpack-cli : cmd에서 webpack을 이용할 수 있게 도와주는 패키지다.
pakage.json 구조 변화
{
"name": "220103",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
}
}
위 코드를 보면 devDependencies 개발자 버전으로 webpack과 webpack-cli가 설치된 것을 확인할 수 있다.
그리고 "node_modules"폴더와 pakage-lock.json 파일이 생성된다.
번들링
통합 터미널에 아래의 명령어를 입력한다.
npx webpack --entry ./source/index.js --output-path ./public/ --output-filename index_bundle.js해당 루트에 들어간 다음 최종 폴더에 public이라는 폴더 내에 index_bundle.js 로 번들링 해준단 뜻이다.
위 명령어를 실행한 후 다음과 같이 public 폴더와 해당 폴더 내에 index_bundle.js라는 자바스크립트 파일이 생긴다.
이것이 우리가 최종적으로 번들링 한 파일이다.
index_bundle.js
(()=>{"use strict";document.querySelector("#root").innerHTML="hello word"})();위 코드는 현재 개발 모드가 "배포용", "개발용"으로 결정하지 않아 "배포용"으로 간단하게 정리된 코드이다.
index.html
해당 파일 div#root 태그 밑에 public폴더 내에 있는 index_bundle.js 소스를 불러오게 수정해보자
<html>
<body>
<h1>Hello webpack!</h1>
<div id="root"></div>
<!-- 아래 스크립트 태그 추가 -->
<script src="public/index_bundle.js"></script>
</body>
</html>프로젝트 폴더/index.html 을 라이브서버로 확인
해당 폴더 구조
이렇게 여러개로 구성되어 있는 .js파일들을 index_bundle.js 파일 하나로 번들링 된 것을 확인할 수 있다.
