웹사이트를 만들다 보면 js, css, img 등 수많은 파일들이 생겨납니다. 완성된 웹사이트를 로딩해보면, 많은 파일들이 다운로드 되는걸 알 수 있습니다. 서버와의 접속이 많을 수록 어플리케이션은 느리게 로딩되기 때문에 이를 해결하고자 webpack이 나왔습니다.
(웹팩이 무엇인지 보여주는 그림)
(수많은 파일들이 로딩되는 어플리케이션)
1. webpack 라이브러리 설치
npm install -D webpack webpack-cli- 옵션 -D : 개발을 위한 기능 들은 해당 옵션을 사용
- webpack , webpack-cli : 두개의 패키지 설치
2. 사용 방법
2-1) 각각의 컴퍼넌트를 import 받는다.
- hello.js
var word = 'HELLO'
export default word;
- world.js
var word = 'World';
export default word;
- index.js
import hello_word from "./hello.js";
import world_word from "./world.js";
document.querySelector('#root').innerHTML = hellow_word + ' ' + world_word;
- index.html
<html>
<head></head>
<body>
<h1>Hello. Webpack</h1>
<div id="root"></div>
</body>
</html>
각각의 컴퍼넌트를 하나의 파일(index.js)에 import를 받아 만든다.
2-2) 터미널에서 webpack 실행
npx webpack --entry ./source/index.js --output ./public/index_bundle.js- 프로젝트 안에서 webpack 실행시 npx로 시작
- index.js라는 파일이 사용하고있는 모든파일들을 하나의 index_bundle이라는 파일로 생성
2-3) 파일(index.html)에서 생성한 index_bundle.js를 연결
<html>
<head></head>
<body>
<h1>Hello. Webpack</h1>
<div id="root"></div>
<script src="./public/index_bundle.js"></script>
</body>
</html>반응형
'React' 카테고리의 다른 글
| [ReactJS] React Router (0) | 2022.08.17 |
|---|---|
| [ReactJS] useEffect (0) | 2022.08.16 |
| [ReactJS] React 설치(node.js, npx) 및 실행 (0) | 2022.08.14 |
| [ReactJS] props (0) | 2022.08.13 |
| [ReactJS] Redux (0) | 2022.08.11 |