Do it! Vue.js 입문 도서를 읽고 중요한 부분만 정리합니다!
구매링크: http://www.yes24.com/Product/Goods/58206961
📄 웹팩
웹팩 = 모듈 번들러
서로 연관이 있는 모듈 간의 관계를 해석하여 정적인 자원을 변환해주는 변환 도구
→ 파일 간의 연관 관계를 파악하여 하나의 자바스크립트 파일로 변환해주는 변환 도구
웹팩의 취지
애플리케이션 동작과 관련된 여러 개의 파일 (HTML, CSS, JS, 이미지 등) 들을 1개의 자바스크립트 파일 안에 다 넣어 버리고 자바스크립트 파일만 로딩해도 웹 앱이 돌아가게 하자
→ 웹 앱의 로딩 속도를 향상시키기 위해 사용한다.
웹 페이지를 브라우저에 나타내기 위해 웹 화면을 구성할 때 화면 구성에 필요한 파일들을 서버에 보내는 HTTP 요청이 발생한다. 따라서 HTTP 네트워크 요청 숫자가 늘어나면 늘어날수록 웹 화면의 로딩 시간은 길어질 수 밖에 없다.
웹팩 데브 서버
웹팩 설정 파일의 변화를 감지하여 빠르게 웹팩을 빌드할 수 있도록 하는 유틸리티이자 Node.js 서버이다.
웹팩 데브 서버는 웹팩 설정 파일의 내용이 변경되면 브라우저 화면을 자동으로 새로 고침하고 바로 웹팩으로 다시 빌드하는 기능이 있다.
인 메모리 기반
dist: 빌드 결과물 폴더
npm run dev명령어를 실행했을 때 dist 폴더가 생기지 않으나 웹팩으로 빌드한 것 같은 효과를 얻게 된다. 빌드한 파일을 파일 시스템에 저장하지 않고 컴퓨터 메모리에만 저장된다.
파일 시스템에 파일을 쓰고 읽는 시간보다 메모리에 저장하고 읽는 시간이 더 빠르기 때문이다.
웹팩의 주요 속성 (webpack.config.js)
entry
entry: './src/main.js',웹팩으로 빌드(변환)할 대상 파일을 지정하는 속성이다. 전체 애플리케이션 로직과 필요 라이브러리를 로딩하는 로직이 들어간다.
웹팩으로 빌드할 파일을 src 폴더 밑의 main.js파일로 지정한다.main.js 파일에 정의한 내용에 따라 파일들이 웹팩으로 번들링(빌드)된다.
output
웹팩으로 빌드한 결과물의 위치와 파일 이름 등 세부 옵션을 설정하는 속성이다.
loader
웹팩으로 빌드할 때 HTML, CSS, 이미지 파일 등을 자바스크립트로 변환하기 위해 필요한 설정 정의하는 속성이다.
plugin
웹팩으로 빌드하고 나온 결과물에 대해 추가 기능을 제공하는 속성이다. 결과물의 사이즈를 줄이거나 결과물을 기타 CSS, HTML 파일로 분리하는 기능이 있다.
resolve
웹팩으로 빌드할 때 해당 파일이 어떻게 해석되는지 정의하는 속성이다. 특정 라이브러리를 로딩할 때 버전이나 파일 경로는 어디로 지정하는 지 등을 정의한다.
