[12주차] 4. Webpack(2)

Webpack

Chunk

• bundle 파일이 특정 기준을 통하여 몇 개의 파일로 나뉘어진 형태
• webpack.config.js에서 optimization{}으로 설정 후 yarn build
• runtime chunk {}
• 모듈들에 대한 내용만 남고 분리
• vendor chunk {}
• vendor : 외부 패키지 모듈 ex) jQuery
• 외부 모듈만 분리하여 관리
• hash 값이 바뀌지 않아 hash 값을 통해 효율 관리 가능

chunkhash

• 나눠진 파일 별로 hash 값 부여
• 모듈을 제외한 chunk에는 영향을 주지 않음

소스 코드 최적화

• 최종적으로 사용자에게 전달하는 리소스는 최적화 하여 전달해야 함
• 모듈을 사용하지 않고 직접 소스 코드 최적화 방법
• 사용자를 위해 최적화 하는 것이므로 production mode에 해당

Minification & Mangling

• 코드 형태 압축
• 1. 어플리케이션이 동작하는 과정에 관여하지 않는 코드들 제거 ex) 주석, console.log 등
• 2. 표현 간결화
• 3. 표현의 난독화(Mangling) : 변수들을 알파벳 하나 등의 이름 최소화
• 뒤에 객체형태로 둘 경우 선택적으로 일부분만 minification 함
• 뒤에 Boolean 타입일 경우 할 수 있는 모든 최적화 실시
• 참조 링크 : https://github.com/jantimon/html-webpack-plugin#minification

css 코드 최적화

• css nano : css 코드 최소화 해줌(공백이나 줄바꿈 삭제 등)
  사이트 : https://cssnano.co/
  optimize-css-assets-webpack-plugin 이용해서 설치해서 적용
  : https://github.com/NMFR/optimize-css-assets-webpack-plugin

js 최적화

• terser 모듈 활용
• optimization 에서 minimize :true, minimize : [new TerserWebpackPlugin()] 추가

loader

• use 안에 loader: 로더 종류

POSTCSS

• https://postcss.org/
• postcss loader 추가 해주기

autoprefixer

• 자동으로 prefixer 추가
• prefixer : 접두사
• vendor prefixer : 접두사를 제공하는 공급사

BROWSERLIST

• 지원하고자 하는 브라우저들에 대한 설정
• https://github.com/browserslist/browserslist
• autoprefixer 뿐만 아니라 다른 plugin에서 사용
• targetbrowser : 지원 범위
• 특정 범위 조건을 생성하고 그 조건을 조합해서 구현

Tips

• jQuery 설치 : yarn add jquery
• script 명령어
• development mode 명령어 : dev -> 메모리 상에만 있음(파일 지움, 생성 없음)
• production mode 명령어 : build