[Vue.js] 웹팩

출처

프론트엔드 개발자를 위한 웹팩 - 인프런 | 강의

webpack

 

---

 

 

◽ 웹팩이란?

모듈 번들러(Module Bundler)이다.

 

 

◽ 모듈

1) 자바스크립트의 관점

프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위이다.

ex) math.js => 더하기, 빼기, 곱하기를 하는 3가지 메소드를 가진 js 모듈

 

2) 웹팩의 관점

JS 모듈에 국한되지 않고 웹 어플리케이션을 구성하는 모든 자원을 의미한다.

css, Images, Font, Html 등등의 모든 파일이 하나의 모듈이 될 수 있다.

 

 

 

◽ 모듈 번들링(Module Bundling)이란?

웹서비스를 구성하는 많은 자원들을 하나의 파일로 병합/압축하는 것을 모듈 번들링이라고 한다.

웹팩은 파일들간의 연관관계를 파악하여 하나로 변환하고 최적화한다. (=하나로 합친다는 관점)

 

 

 

◽ 웹팩 관리 방법 2가지

- [package.json]으로 관리하기

"scripts": {
	// --mode=none을 추가하는 형식으로 계속 추가하여 관리한다.
	"build": "webpack --mode=none"
}

 

- config 파일로 관리하기

var path = require('path');

module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

 

 

 

◽ 웹팩을 사용하는 이유

1) Grunt나 Gulp 같은 도구들이 수행하는 일

- HTML, CSS, JS 압축

- 이미지 압축

- CSS 전처리기 변환

- 새로 고침 없이 화면 반영

 

2) 속도 개선

웹팩은 기본적으로 필요한 자원은 미리 로딩하는게 아니라

그때 그때 요청하자는 철학을 갖고 있다.

 

 

 

◽ 웹팩으로 해결하려는 문제

1) 브라우저 별 HTTP 요청 숫자의 제약의 해결

TCP 스펙에 따라 브라우저 별로 한번에 서버로 보낼 수 있는 HTTP 요청 숫자는 제약되어 있다.

그 요청 숫자를 줄이는 것이 어플리케이션의 성능을 높여준다고 할 수 있다.

웹팩은 여러개의 파일을 하나로 합치는 역할을 하기때문에 숫자 제약을 피할 수 있다.

 

2) 원하는 순간에 모듈 로딩 가능

웹팩으로 원하는 타이밍에 모듈 로딩이 가능하다.

 

3) 자바스크립트 변수 유효 범위

ES6의 Modules 문법과 웹팩의 모듈 번들링으로 해결한다.

 

 

---

 

◽ 라이브러리 종류

- Minifiers: 속도 개선

- Linters: 문법 검사, 에러 검사

- Gulp: 웹 자동화 도구, 웹 스크립트 매니저