웹팩 (Webpack)
Webpack은 무엇인가
- 서로 연관관계가 있는 웹 자원들을 js, css, img와 같은 static 자원으로 변환해주는 모듈 번들러이다.
Modules with dependencies -> Static assets
- 웹페이지들간의 관계들을 웹팩에서 bundling하게 되며 또한 축소와 압축 작업까지 함께 수행하게 된다.
- 웹팩의 역할
1) 모듈간의 관계들을 정립하는 의존성 그래프를 갖게 하여 모듈 관리를 수월하게 해준다.
2) 자원들을 minification등의 기법을 이용해 최적화하여 웹 페이지의 성능을 올린다.
Webpack을 사용하는 이유 & 배경
- 새로운 형태의 Web Task Manager
기존 WTM (Gulp, Grunt)의 기능 + 모듈간의 의존성 관리
초기 자바 스크립트는 모듈 관리를 지원하지 않았기 때문에 웹팩은 최적의 개발 툴이 될 수 있었다.
Ex) minification을 webpack default cli로 실행할 수 있다.
webpack -p
- 자바 스크립트의 Code Based Modules를 관리해준다.
자바스크립트 모듈화의 필요성 ; AMD, Common js, ES6 (Modules)등의 모듈 로더
기존 모듈 로더들과의 차이점 : 모듈간의 관계를 청크(chunk)단위로 나누어 필요할 때 불러올 수 있도록 하였다.
현대 웹에서 JS의 역할이 커짐으로 Client쪽에 들어가는 코드의 양이 많아지며 또한 복잡해졌다.
복잡한 웹 어플리케이션을 관리하기 위해 모듈 단위로 관리를 수행하는 Common js, AMD, ES6 Modules 등이 등장했다.
기존 모듈 로더들의 장점을 흡수하며 또한 가독성이나 다수 모듈 병행 처리 불가 등의 약점을 보완하기 위해 Webpack이 등장했다.
자바 스크립트의 모듈화 문제에 대해
- 아래 코드들은 script태그를 이용해 간단히 자바스크립트의 모듈화를 시도하는 예시이다.
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="library1.js"></script>
<script src="module3.js"></script>
->위 코드와 같은 모듈 로딩 방식의 문제점으로는 전역 변수의 충돌, 스크립트의 로딩 순서와 복잡도에 따른 관리상의 문제가 있다.
-> 위 2가지의 문제를 해결하기 위해 AMD를 포함한 모듈 로더들과 로더들의 기능을 포함해 웹 자동화 도구까지 포함한 Webpack이 등장하게 되었다.
Webpack의 철학
- Everything is Module
모든 웹 자원 (js, css, html)이 모듈형태로 불러올 수 있다.
require('base.css');
require('main.js');
- Load only "what" you need and "when" you need
실행 초기에 불필요한 사항들을 모두 불러오지 않고 필요할 때 필요한 것만 불러와 사용할 수 있도록 하였다.
Webpack 시작하기
- webpack을 설치하기 위해서는 npm (Node Package Manager)을 필수로 설치한 후 진행해야 한다. 이는 node.js를 설치하면 함께 따라온다.
- Webpack을 활용하기 위한 절차 실습
1) webpack 전역 설치 : npm i webpack -g
2) npm init을 통해 package.json을 생성한다. : npm init -y
이 작업은 cd를 통해 프로젝트를 진행할 폴더로 진입한 후 수행한다.
3) app/index.js와 index.html을 생성한다.
<!--index.html-->
<!--lodash는 2019-07-03 현재 4.17.11이 최신 버전이다.-->
<html>
<head>
<title>webpack demo</title>
<script src="https://unpkg.com/lodash@4.17.11"></script>
</head>
<body>
<script src="app/index.js"></script>
</body>
</html>
//index.js
function component() {
var element = document.createElement('div');
//lodash(_)는 자바스크립트 유틸리티 라이브러리로 배열 안의 객체들 값을 관리할 때 유용하다.
//join API를 이용해 hello webpack을 element에 붙인다.
element.innerHTML = _.join('Hello', 'webpack');
return element;
}
document.body.appendChild(component());
4) js와 html에 코드를 추가해준다.
npm i lodash --save
+ import _ from 'lodash'; //index.js에 실행
// lodash를 설치했기 때문에 홈페이지에서 더이상 불러올 필요가 없어진다.
- <script src="https://unpkg.com/lodash@4.17.11"></script>
5) webpack app/index.js dist/bundle.js 명령어를 실행한 후 index.html을 불러온다.
6) webpack.config.js파일을 추가 후 webpack을 사용하기 시작한다.
webpack.config.js는 웹팩에 대한 설정파일이라고 생각하면 편하다.
'프로그래밍 > React' 카테고리의 다른 글
| React-TypeScript에서 redux사용시 타입 에러 해결과정 기록 (2) | 2023.06.09 |
|---|---|
| 기존 React app project에 TypeScript 적용하기 (0) | 2022.08.10 |
| React 알아둘 개념 (0) | 2019.08.15 |
| 리액트 학습 (0) | 2019.08.15 |
