웹팩(Webpack)은?
간단히 말해 모듈(HTML, CSS, JavaScript, sass, png 등 각각 모듈)을 묶어주는거다.
인터넷은 어렵고, 복잡하지만, 우리는 조금 있으면 되고, 원하는 설정도 간단하다. 이런것 도와주는거다
엄청 강력한 도구다, 꽤 복잡한 config file에서 강한 파워가 나온다.
코드가 많아지면 유용하다고 한다.
시작해보자
설치하면 CLI 및 API를 통해 웹팩과 상호작용 가능
다른 bundlers와 비교
경고: webpack5를 돌리기 위한 Node.js 최소 버전 10.13.0(LTS)
기본 설정
- 디렉토리를 만들고
- npm 실행하고
- 웹팩을 로컬에 설치
- webpack-cli도 설치(커맨드라인에서 웹팩 사용하기 위한 도구)
디렉토리는 이렇게 구성될거다
project
webpack-demo
|- package.json
|- index.html
|- /src
|- index.jsindex.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/lodash@4.17.20"></script>
<title>Getting Started</title>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>src/index.js
function component() {
const element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
패키지를 프라이빗으로 만들기위해 package.json파일도 수정한다. 실수로 코드를 올릴때를 방지해준다.
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.31.0",
"webpack-cli": "^4.6.0"
}
}
번들 만들기
조금 구조를 바꿔보자
source(src) 코드는 쓰고, 편집할 코드고,
distribution(dist) 코드는 브라우저에 불러올 최적화된 결과(output) 코드다.
lodash 라이브러리를 index.js와 번들로 묶으려면, 라이브러리를 로컬에 설치한다
npm install --save lodashTip: 상품으로 낼 번들에 제공되는 패키지를 설치할 때 npm install --save를 사용한다. 개발용 패키지(예: linter, 테스트 라이브러리 등)를 설치하는 경우는 npm install --save-dev를 사용해야 된다. (npm 문서 참고)
이제, lodash를 스크립트에 넣어보자
src/index.js
import _ from 'lodash';
function component() {
const element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
이제는 index.html를 업데이트해줄 차례다.
import 해줬으니, lodash <script>를 지워준다.
그리고 밑의 <script>의 src를 바로 불러오는 대신 번들을 불러오게 변경한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Getting Started</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
이 설정에서 index.js는 분명히 lodash가 있어야 하며 이를 _로 바인딩한다. 모듈에 필요한 종속물들(dependencies)을 지정함으로써 웹팩은 이 정보를 사용하여 종속성 그래프(dependency graph)를 작성할 수 있다. 그런 다음 그래프를 사용하여 스크립트가 올바른 순서로 실행되는 최적화된 번들을 생성한다.
npx webpack를 실행해보자, src/index.js에 있는 스크립트를 Entry Point로 사용하고 dist/main.js를 결과로 만든다. npx 명령은 Node 8.2/npm 5.2.0 이상을 데리고, webpack binary(./node_modules/.bin/webpack)를 실행한다.
결과가 다를텐데, 빌드만 성공되면 괜찮다
dist 폴더에 index.html을 브라우저에서 열면 "Hello webpack'이 보인다
설정 사용하기
버전 4 부터 webpack은 설정(configuration)이 필요하지 않지만 대부분의 프로젝트에는 더 복잡한 설정이 필요하므로 구성 파일도 지원한다. 많은 명령을 수동으로 커맨드에서 입력하는 것보다 훨씬 효율적이다.
예시
project
webpack.config.js
npx webpack --config webpack.config.js 실행
정리하자
- 여기서 메인 컨셉은 entry와 output이다.
- src와 dist폴더로 파일들을 정리했다(이름은 상관없지만 보통 저렇게 쓴다고 한다)
- src(source)에는 웹팩이 우리를 위해 번들(모아줄) 코드를 적는다.
- 웹팩이 실행되면, 모든 파일에서 import문을 찾아서,
- dist폴더에 하나의 파일로 만들어준다.
- entry파일, 프로젝트의 모든 모듈을 연결시켜주는 메인 어플리케이션 파일이다.
- 위에서는 /src/index.js이 entry
- 그리고 output 파일은 컴파일된 버전 즉 dist/main.js
'Web Dev > JavaScript :: 자바스크립트' 카테고리의 다른 글
| JavaScript :: Keep video play (0) | 2023.05.04 |
|---|---|
| [JavaScript] ES6 모듈 - 단 두 가지 요소 import, export (0) | 2021.04.09 |
| [JavaScript] npm - 플러그인, 라이브러리, 도구의 저장소 (0) | 2021.04.04 |
| [JavaScript] 클래스(class)는 함수다 (0) | 2021.03.23 |
| [JavaScript] 모듈 패턴(Module Pattern) 가장 흔한 디자인 패턴 (0) | 2021.03.15 |