01. Vue.js - webpack 사용하기

 

MAC 환경에서 진행하였고, 윈도우 사용자 분들도 진행에 무리 없으실 것 같습니다.

 

1. npm init
- npm 사용을 위해선 노드가 설치 되어 있어야 합니다. 노드 설치가 되어 있지 않으신 분들은 https://nodejs.org/ko/ 를 통해 다운로드 받으실수 있습니다. 

npm init 실행화면

- npm init 결과 package.json 파일이 생성
- package.json은 패키지에 관한 정보와 의존중인 버전에 관한 정보를 담고 있는 파일입니다.

 

---

 

2. npm을 이용하여 실습에 필요한 패키지들을 설치합니다 

vue

vue 패키지를 설치, npm install에대한 옵션이 붙지 않았으므로, 현 프로젝트 내에서만 패키지가 사용되는 있는 지역 설치입니다.

webpack, webpack-cli

vue-template-compiler, vue-loader

여기서 뒤에 붙은  -D는 개발 시에만 사용하는 개발용 의존 패키지를 명시합니다. 개발에만 필요할뿐, 배포시에는 불필요한 패키지를 설치할때 붙여주는 옵션입니다. ( --save-dev의 축약형)
이 외에도 -g, --save등 여러 옵션 형태가 있으니, 필요에 따라 사용하시면 됩니다.

 

패키지 설치 후의 package.json

 

npm install의 결과 , package.json에서 각각의 옵션에 따라 정의되어있는 패키지들을 보실 수 있습니다.

 

---

 

다음은 webpack 설정에 관여하는 webpack.config.js 파일을 생성하여 , 아래와 같이 코드를 작성하시면 됩니다.

 

webpack.config.js

 

webpack.config.js의 구조는 크게 entry, module, plugins, output으로 나눌수 있습니다.

entry -  명시된 파일을 기준으로 의존성 트리를 만들어 하나의 번들 파일을 만들어 내게 됩니다. 

module - 정규식을 통해 vue파일이 있으면 vue-loader를 통해 하나의 번들로 만들도록 도움을주는 loader를 정의합니다. (여기선 이전에 npm install을 통해 설치한 vue-loader를 정의하였습니다)

plugins - build 된 번들 파일을 동적으로 html 페이지에 추가 할 수 있도록 도움을 주거나, build시에 javscript, css, html 등의 파일을 난독화 및 압축을 진행합니다. 이 외에도 많은 기능이 있어 필수적으로 사용하여도 된다고 보아도 무방합니다.

output - 위에서 진행된 번들과정의 결과물의 이름 및 경로에 대한 설정 부분입니다.

webpack.config.js파일 생성을 완료 후에는, main.js를 생성하여 아래와 같이 작성합니다.

 

여기까지가 webpack의 전반적인 설정이였습니다.

 

---

 

이제는 템플릿을 다룰 것입니다. 

html파일과, vue파일을 하나씩 생성하여 코드를 작성합니다.

webpack.html

 

주의하실점은 <div id = app> 부분에서의 app과 main.js의 mount부분의 정의한 id와 같아야합니다.

 

example.vue

 

간단하게 Vue파일에 대해 코드를 작성하여 보았습니다. Vue파일은 크게 template,  script,  style로 나누어집니다.

 

---

 

이제 npm run build 명령어를 실행하여 빌드를 진행합니다.

 

npm build

 

npm run build 명령어를 실행하면 dist 폴더가 생성되고 그 안에는 app.js파일이 생성됨을 보실 수 있습니다.

빌드 후에 html파일을 실행하면, vue 파일에 작성된 스크립트와 템플릿을 기반으로한 화면이 나타납니다.

 

webpack.html

 

---

 

여기까지가 webpack의 기본적인 사용방법이었습니다.

 

webpack 관련 공부 후 정리 차원에서 작성한 글이라 설명이 난해한 부분도 있을 수 있습니다.

감사합니다.