웹팩(모듈 번들러) 간단 정리

웹팩

- 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)
*** 빌드=번들링=변환 다 같은 말임

 

모듈

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

 

모듈 번들링

- 웹 애플리케이션 몇백개 자원들을 하나의 파일로 압축해주는 동작

- 파일들간의 관계를 모두 파악함

- 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합하는 도구

 

웹팩의 역할

- 웹팩은 파일 단위의 자바스크립트 모듈을 변수로 관리가 가능!!

( 예전엔 AMD, Common.js와 같은 라이브러리 사용했다고 한다...)

- 웹개발 작업 자동화 도구 + 모듈 관리

( 예를 들면 ... HTML, CSS, JS 압축 / 이미지 압축 / CSS 전처리기 변환 이러한 모듈들을 Grunt와 Gulp가 해줌 ) 

- 빠른 로딩속도와 높은 성능

 

브라우저에서 서버로 요청하는 파일 숫자를 줄이면 로딩속도를 높일 수 있음!

그래서 웹 태스크 매니저를 통해 파일들을 압축하고 병합하는 작업들을 진행함!

그리고 초기 페이지 로딩 속도를 높이기 위해 ...

나중에 필요한 자원들은 나중에 요청하는 레이지 로딩(Lazy Loading)를 사용하기도 함!

 

웹으로 해결하려는 문제 (기존의 문제점)

1. 자바스크립트 변수 유효 범위

2. 브라우저별 HTTP 요청 숫자의 제약

3. 사용하지 않는 코드의 관리

4. Dynamic Loading & Lazy Loading 미지원

 

Require.js와 같은 라이브러리를 쓰지 않으면

동적으로 원하는 순간에 모듈을 로딩하는 것이 불가능 했는데

이젠 웹팩의 Code Splitting 기능을 이용하여

원하는 모듈을 원하는 타이밍에 로딩 쌉가능

 

웹펙 사용 전 vs 사용 후

화면상의 차이는 없음! 네트워크 탭보면 알 수 있음

 

사용 전 : html → lodash cdn 요청** → index.js → lodash.js 등등 ... 여러 단계를 거침

사용 후 : html → main.js 끝

 

즉, 리퀘스트를 줄일 수 있음
webpack이 진입점 js파일 하나로 모든 파일들 정리 (그래서 js만 가져와도 됨)

 

웹펙 주요 속성

일단 주요 속성별 간단 순서

Entry → Loader → (빌드,변환,번들링) → Output ← Plubin

 

(1) entry

- 빌드할 대상 파일, 웹펙에서 변환하기 위한 최초 진입점, 자바스크립트 파일 경로

- 지정된 파일에는 웹 애플리케이션의 전반적인 구조와 내용을 입력

- 웹팩이 해당 파일을 가지고 웹 애플리케이션에서 사용되는 모듈들의 연관 관계를 이해하고 분석하기 때문에
애플리케이션을 동작시킬 수 있는 내용들 입력

 

(2) output

- 웹펙을 통한 빌드 후 결과물의 파일 경로(path 속성), 이름을 의미.

 

(3) loader(module)

- 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성

// module : entry에서 output 변환할 때의 loader 규칙!
module: {
    rules: [
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
            // 오른쪽에서 왼쪽 순서 (기입 순서도 중요)
        }
    ]
}

해석하면, .css 확장자들에 대해 'style-loader', 'css-loader' 로더들을 사용한다는 말

 

- style-loader 의 역할은 웹펙에 들어간 스타일을 인라인으로 들어가게함

- css-loader 의 역할은 css가 웹펙으로 들어가게함

(4) plugin

- 결과물에 대한 정보를 변형,  웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성

- 로더랑 비교하면 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면

- 플러그인은 해당 결과물의 형태를 바꾸는 역할


그 외 ...

 

mode

- 'development' 는 개발할 때!

- 'production' 는 배포할 때

- 'none'

 

devServer 

- 웹팩 데브 서버 (Webpack Dev Server)

- 웹팩의 빌드 대상 파일이 변경 되었을 때 매번 웹팩 명령어(빌드)를 실행하지 않아도
코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해줍니다.

- 매번 명령어를 치는 시간과 브라우저를 새로 고침하는 시간 뿐만 아니라

웹팩 빌드 시간 또한 줄여주기 때문에 웹팩 기반의 웹 애플리케이션 개발에 필수로 사용됩니다.

 

웹팩 데브 서버의 특징

- 웹팩 데브 서버로 빌드한 결과물은 메모리에 저장되고 파일로 생성하지는 않음

즉, 컴퓨터 내부적으로는 접근할 수 있지만 사람이 직접 눈으로 보고 파일을 조작할 순 없음

컴퓨터 구조 관점에서 파일 입출력보다 메모리 입출력이 더 빠르고 컴퓨터 자원이 덜 소모된다.

 

resolve

- 웹팩으로 파일의 연관 관계를 해석할 때 사용!

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
}

 

alias 는 별칭같은 느낌 vue$는 쟤야~!
extensions은 저 확장자들 안붙혀도 해석해주겠다!
import {} from './js' 는 extensions가 대신 해석해줘서 필요없음

 

performance

- 그냥 성능 관련

- 제한하는 크기 넘어가면 경고 ... 암튼

 

devtool

- 소스맵 종류 선택해서 개발자 도구 빌드 파일과 실제 파일 연결 링크 제공
개발자모드 console에서 빌드하기 전 파일은 원래는 난독화 때문에 대조가 불가능!

devtool : 'source-map'

 추가하면 빌드한 결과물과 빌드전 결과물을 연결해줌

---

 

추가 .. 공부하면서 이번에 알게 된 것

 

빌드 로그 확인

- npm run build하면 script에 넣어둔 명령어 'webpack' 명령어 확인

- 고유 Hash 확인

- 버전, 시간, 언제 확인

- Asset 별로 Size 확인

- ***Entrypoint 는 모듈 해석 순서

 

네트워크 패널의 No throtting

- 네트워크패널에서 No throtting 누르면 가상 네트워크 환경 구성 가능 .. 개쩐다;

- 저속환경 테스트 가능

 

---

 

공부 내용 출처 : https://inf.run/amsD

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