[webpack]웹팩 시작하기(1)

저번 글에 이어 웹팩 프로젝트를 설정하겠습니다.

 

먼저 package.json 파일을 만들어 줍니다.

 

문법

npm init -y

 

webpack 준비에 필요한 패키지들을 다운받아 줍니다.

(-D : 개발 영역에 다운로드 받는 의미입니다.)

npm i -D webpack webpack-cli webpack-dev-server@next

설치 후 패키지들

 

webpack : bundler 번들러가 동작하기 위한 핵심적인 package입니다.

(webpack version4 이후는 cli도 설치해야 합니다.)

 

webpack-cli : 터미널 부분에 입력하는 여러가지 명령들을 커맨드라인 interface라고 하는데 이것을 지원해줍니다.

(이로인해  webpack-cli를 통하여 command line을 사용할 수 있게 만들어 줍니다 밑에 사진 참고.)

 

webpack-dev-server:"dev" 명령어를 통해 개발 서버에서 어떤 내용을 수정했을 때  바로 화면에 갱신하여 나타나게 해줍니다.

 

 

설치가 끝난 후

package.json 파일을 수정해줍니다.

cli를 이용하여 webpack을 적을 수 있습니다.

 

"srcipt" : { "dev" : "webpack-dev-server --mode developmnt", "build" : "webpack --mode production" }

 

dev : 개발모드임을 알리기 위함 && webpack cli를 통하여 inline 코드 작성과 dev-server로 실행 시키기 위해 수정

build : production 즉, 제품(배포)모드를 알리기 위함

 

 

webpack.config.js

 

- webpack dev server를 통해서 dev server를 open하려면 해당 구성 파일이 필요합니다.

- 웹팩에 관련된 구성 옵션을 여기서 설정합니다.