Webpack 2

웹팩(Webpack)을 이용한 웹앱의 번들 크기를 줄이는 방법들

번들 분할 웹팩과 같은 웹 번들러는 코드 및 코드 사이의 종속성을 분석 단일 파일로 번들 가장 적합하게 분할 하려 함 이를 분할하는 프로세스를 번들 분할이라고 함 터서(Terser) 웹팩이 코드를 최소화하고 최적화하기 위해 사용하는 도구 변수와 함수의 이름을 미니마이즈하고 (가능한 작게 변경) 트리쉐이킹 이라는 프로세스 수행으로, 어플리케이션에서 사용되지 않는 코드 제거 이때, 코드가 앱의 동작에 영향을 조금이라도 줄 경우 제거 하지 않음 트리쉐이킹은 매우 복작한 프로세스라 기능이 손상되지 않도록 신중하게 수행되어야 함 ESModule 보다 CommonJS 의 트리쉐이킹이 더 적게 일어남 ESModule = 새로운 표준, CommonJS = 오래된 모듈 표준 번들 크기 측정 웹팩에서는 Webpack Bu..

client/web 2023.01.28

[기록] Webpack 기본과 실습 - loader, plugin, ...

inflearn - 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 김정환 님 강의를 들으며 기록한 내용이다. NodeJS node js 를 배워야 하는 이유? 브라우저에 맞게 개발 타입스크립트 같은 고사양 언어 빌드 자동화 프로젝트 사용 라이브러리 다운 및 테스트 자동화 개발환경 커스터마이징 제공 node js 버전관리 nodejs는 시맨틱 버전관리 메이저.마이너.패치 ~ 틸트, ^캐럿 버전 표기 Webpack 웹팩이란? 웹팩은 모듈로 연결된 여러개의 파일을 합쳐주는 역할을 함 그 결과 하나로 합쳐진 파일을 번들이라고 함 웹팩이 번들을 만드는 번들러 역할을 함 따라서 웹팩을 번들러라고도 함 실습준비 기본 프로젝트 생성 mkdir basic_frontend cd ba..

client/web 2022.03.16