이전 포스팅에 올렸던 순서도를 그대로 가져왔다.
이제 본격적으로 위의 절차를 그대로 따라 Bundle 파일을 생성하고, 이 Bundle 파일을 html의 script에 포함시켜서 웹사이트를 실행시켜볼 것이다.
1. 자바스크립트 파일 생성
[자바스크립트 파일들을 생성한 뒤, 각 파일마다 외부로 보낼 변수를 export default로 지정해주는 단계]
p1.js
let s = "원숭이 엉덩이는 빨개";
export default s;
p2.js
let s = "빨가면 사과";
export default s;
p3.js
let s = "사과는 맛있어";
export default s;
2. Entry 파일 생성
[자바스크립트 모듈들을 한 파일에 모으는 단계]
index.js
모듈을 사용하여 p1.js, p2.js, p3.js에 있던 s변수가 각각 s1, s2, s3라는 이름으로 사용될 수 있게 되었다.
import s1 from "./p1.js";
import s2 from "./p2.js";
import s3 from "./p3.js";
document.querySelector("#text").innerHTML = s1+" "+s2+" "+s3;
3. Webpack 설치
[프로젝트 폴더에 webpack을 설치하는 단계]
webpack을 사용하기 위해서는 Node.js를 설치해야 하는데, 설치는 매우 간단하기 때문에 설명은 생략한다.
Node.js는 자바스크립트 기반의 웹프레임워크이다.
다운로드 | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
cmd에서 node를 입력하여 버전이 잘 뜬다면 설치가 정상적으로 이루어진 것이다.
먼저, npm init 명령으로 현재 디렉토리를 node.js 프로젝트 폴더라고 선언하자.
명령을 입력했다면 package name부터 시작해서 package의 특성을 줄 수 있는데, 모두 기본값으로 지정하고 싶다면 계속 엔터를 눌러 스킵하면 된다.
특성을 모두 지정하고 마지막에 yes라고 입력하면,
이렇게 package.json이라는 파일이 생성된다.
package.json파일에는 패키지의 이름, 버전, 권한, 라이센스, 라이브러리 등 패키지의 정보가 담겨있다.
그리고 다음 명령어로 webpack, webpack-cli를 설치한다.
npm install -D webpack webpack-cli※ -D 옵션 : 배포할 때 해당 라이브러리는 제외한다. (webpack은 빌드용이기 때문에 배포할 때는 필요 없음)
4. Bundle 파일 생성
[webpack을 이용하여 Bundle 파일을 생성하는 단계]
다음 명령어로 bundle 작업을 수행한다.
npx webpack --entry [Entry file 경로] --output-path [bundle 파일을 생성할 경로]※ --output-path 옵션 대신 --output 옵션을 넣어야 되는 버전도 있다.
이렇게 bundle 디렉토리에 생성된 main.js이 bundle 파일이다.
main.js(bundle file)
놀랍게도 세 문자열이 모두 자동으로 합쳐졌다.
5. 실행
test.html
<html>
<body>
<div id="text"></div>
<script src="./bundle/main.js"></script>
</body>
</html>
정상적으로 잘 출력되었다.
main.js만 올라갔는데도 잘 실행된 모습이다.
webpack을 사용하지 않았다면 p1.js, p2.js, p3.js파일이 모두 올라가야 실행 되었을 것이다.
이렇게 webpack을 사용하면 웹페이지에서 다운로드할 소스 코드량을 줄일 수 있기 때문에 성능 향상에 큰 도움이 되는 것이다.
'Webpack' 카테고리의 다른 글
| [Webpack] config 파일(2) - loader, plugin (0) | 2021.04.19 |
|---|---|
| [Webpack] config 파일(1) - entry, output, mode (0) | 2021.04.16 |
| [Webpack] Webpack 소개 (0) | 2021.04.15 |
댓글