「WebPack 개발」 1 웹펙 세팅 & 웹서버 실행

대규모 협업 프로젝트 상황을 가정하며, webpack & 마이크로 적용방식에 관해 알아보자.

 

 

 

---

1] npm 설치

'eCommerce'폴더 아래, Product폴더를 생성한 뒤 버전 초기화를 진행한다. 참고로 버전 초기화는 'npm init -y'를 사용하면 된다.

 

프로젝트 패키지 Ver자동설정

 

 

 

 

---

2] Webpack모듈 설치

micro프론트앤드 개발에 필요한 webpack모듈은 아래와 같다.

webpack npm모듈 설치

> webpack

> webpack-cli

> webpack-dev-server

> html-webpack-plugin

 

 

'product'폴더 내(*Ecommerce폴더 아님)에서 위의 웹팩 모듈을 설치했다면, 'nodemon', 'faker'모듈도 추가로 설치한다.

> nodemon

> @faker-js/faker

 

 

참고로 faker모듈은 말 그대로 '가짜 DB'다. 개발 초기, 테스트용 데이터가 필요할 때 유용한 모듈이다. 

 

 

 

 

 

 

---

3] src(폴더) 생성

product폴더 아래, src폴더에는 핵심 js코드가 저장된다. src폴더는 product팀의 코드가 업로드 되는 메인 폴더다. (빌드 과정에서) webpack은 해당 index.js파일을 bundle.js파일로 변환해준다.

 

Ecommerce/Product/src/index.js

 

 

 

 

 

---

4] package.json 수정

npm run start, npm run build 명령어와 관련된 실행 코드를 'package.json'에 추가한다.

 

package.json 수정

 

 

기본 세팅을 삭제한 후, 아래와 같이 'start' 명령어를 넣어준다.

 

 

 

 

 

 

---

5] 빌드

패키지 파일 수정이 끝나면, npm run start를 실행해보자.

 

 

 

아래와 같이 dist>폴더와 함께 main.js파일이 추가된다. 즉, 웹팩은 프로젝트 내의 모듈을 몽땅 담아서 main.js파일을 생성해준다. webpack server를 실행되면, product/src 폴더의 js파일의 결과가 main.js에 압축되는 셈이다.

 

 

 

 

 

 

---

6] 웹팩 서버 실행

서두에서 설치한 webpack-dev-server모듈을 사용하기 위해서 'webpack.config.js'파일을 product폴더에 생성해준다.

 

webpack.config.js 생성

 

그리고 package.json의 script값을 아래와 같이 수정한다.(빌드와 실행 분리)

 

package.json 수정

 

실행창에서 'npm run start'를 실행해보자.

 

 

 

webpack.config.js에서 '8081'포트를 지정했다면,

'localhost:8081/main.js' url에서 웹팩이 빌드한 main.js파일을 확인할 수 있다.

 

localhost:8081/main.js

 

이와 같이, product개발팀은 8081포트를 통해 개발팀 내 자체 테스트를 진행할 수 있다.