「WebPack 개발」 1 웹펙 세팅 & 웹서버 실행
대규모 협업 프로젝트 상황을 가정하며, webpack & 마이크로 적용방식에 관해 알아보자.
1] npm 설치
'eCommerce'폴더 아래, Product폴더를 생성한 뒤 버전 초기화를 진행한다. 참고로 버전 초기화는 'npm init -y'를 사용하면 된다.
2] Webpack모듈 설치
micro프론트앤드 개발에 필요한 webpack모듈은 아래와 같다.
> 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파일로 변환해준다.
4] package.json 수정
npm run start, npm run build 명령어와 관련된 실행 코드를 '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폴더에 생성해준다.
그리고 package.json의 script값을 아래와 같이 수정한다.(빌드와 실행 분리)
실행창에서 'npm run start'를 실행해보자.
webpack.config.js에서 '8081'포트를 지정했다면,
'localhost:8081/main.js' url에서 웹팩이 빌드한 main.js파일을 확인할 수 있다.
이와 같이, product개발팀은 8081포트를 통해 개발팀 내 자체 테스트를 진행할 수 있다.