Webpack(웹팩) 적용하기

npm init

프로젝트가 npm으로 관리되어야 하므로 npm init을 진행한다.

npm init -y

원래는 옵션 내용을 물어보나 -y옵션을 붙이게 되면 기본세팅 상태로 만들어지게 된다.

만들어진 package.json

옵션	설명
name	프로젝트 이름
version	프로젝트의 버전
description	프로젝트에 대한 간단하 설명
main	프로그램의 시작점이 되는 모듈의 ID (우리도 npm 생태계에 올릴 수 있게 하는 옵션)
scripts	현재 프로젝트 내부에서 사용할 수 있는 스크립트 명령들 ( "명령이름": "명령~" -> 터미널 $ npm run 명령이름 )
author	소유주
license	다른 사용자들이 이 패키지를 사용할 때 필요한 권한

웹팩 설치

npm install webpack webpack-cli

webpack은 node에서  webpack을 사용하기 위함이고

webpack-cli는 터미널에서 webpack을 사용하기 위함이다.

 

webpack cli 사용하기

npx webpack --entry (진입점 파일.js 경로) --output-path (결과 파일.js경로)

해당 명령어를 그냥 실행하면 mode가 product(배포용)상태(압축되어 난독화됨)인데, 뒤 명령어에다가 --mode development를 붙이면 압축 없이 코드가 나오게 된다.

 

엥 근데 이거 빌드 할때마다 일케 불편하게 직접 다 입력해야됨?!

언제나 더 나은 방법은 있기 마련이다.

webpack은 명령어를 수행할때, webpack.config.js를 참고한다.

해당 파일에 이렇게 작성해주면 entry와 output을 json형태로 관리할 수 있다.

이후에 webpack명령어를 콘솔에 입력하면 알아서 번들링을 해준다.

npm webpack

 

엥 근데 이거 일일히 npm webpack해줘야함? 빌드할때마다 해주면 안됨?

package.json의 script에 webpack을 등록시켜주자.

이러면 npm run build를 하면 알아서 번들링 해준다.