「WebPack 개발」 3 마이크로 프론트엔드 개발

「webpack 개발」 1, 2편에서 웹팩에 관한 사용법을 숙지했다면, 대규모 프로젝트에서 필수적인 '마이크로서비스 아키텍처' 를 구현할 수 있다. 이번 포스팅에서는 platform을 개발한다는 가정 하에 각 팀들을 배치해보자.

 

 

 

 

---

1] 폴더 정리

Platform(프로젝트명) 폴더 아래 각 개발팀들을 폴더별로 배치한다.

 

팀장이 주관하는(배포) 메인 폴더, 'container'를 생성한 뒤, 웹팩에 필요한 npm 모듈을 설치한다.

- webpack

- webpack-cli

- webpack-dev-server

- html-webpack-plugin

- nodemon(권장사항)

 

platform/container/package.json

 

 

 

 

---

2] public (폴더)생성

클라이언트가 접근할 수 있는 public폴더와 index.html파일을 생성한다.

 

platform/container/public/index.html

 

 

 

 

 

---

3] src(폴더)생성

각 팀들의 개발 코드를 취합하는 index.js파일을 src폴더와 함께 생성해준다.

 

platform/container/src/index.js

 

 

 

 

 

 

---

4] webpack.config.js 생성

container코드 결과를 볼 수 있는 웹서버를 설정하기 위해 'webpack.config.js'를 생성한다.

 

platform/container/webpack.config.js

 

포트를 8080(product = 8081)으로 지정한 뒤, HtmlWebpackPlugin을 통해 './public/index.html'과 'src'폴더 내 파일을 연결해준다.

 

 

 

 

 

 

---

5] 웹서버(container) 실행

배포팀이라 할 수 있는 container 코드를 실행해보자.

 

package.json의 script 값을 위와 같이 수정한 뒤, 'npm run start'(npm start 상관없음)를 실행한다.

 

 

webpack.config.js(container폴더 내)에서 설정한 webpack dev Server의 8080포트는 아래와 같은 결과를 보여준다.

 

localhost:8080/

 

 

8080포트는 관습적인 웹서버 포트이며, 실질적인 배포를 나타낸다.

 

간단하게 container팀의 웹서버를 만들었다면, 이제 product 및 기타 팀의 결과를 container와 결합하는 일이 남아 있다.

해당 부분은 다음 포스팅에서 알아보자.