Webpack
1.[Webpack 알아보기] #1 - Webpack이란?
.png)
최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)모듈 번들러: 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구
2.[Webpack 알아보기] #2 - Module/ Bundle이란?
프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져 있는 형태내장되어 있는 코어 모듈 (Built-in Core Module)ex. Node.js Module의 require('path')커뮤니티 기반의 모듈 (Community-based Module)ex. NPM \
3.[Webpack 알아보기] #3 - Caching이란?
사용자가 서비스를 이용하기 위해 기다리는 시간을 최소화하기 위해 사용되는 것사용자가 필요한 리소스들의 복사본서버에 요청하는 횟수 감소→ 리소스의 내용이 변하지 않는다면 같은 내용을 서버에 요청할 필요 없음→ 리소스 복사본을 만들어 서버보다 더 가까운 위치에 두고 이 복
4.[Webpack 알아보기] #4 - Chunk/ Hash란?
하나의 번들 파일을 효과적으로 다루기 위해 여러가지의 파일로 다시 나누는 것번들링을 하게 될 경우, 생성되는 번들파일의 사이즈가 점점 늘어남장점 : 파일의 요청수 줄어듬단점 : 파일 크기가 커져 상대적으로 파일이 도착하는 시간이 지연됨 → Chunk!runtime ch
5.[Webpack 알아보기] #5 - Plugin이란?
웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성Webpack이 동작하는 전체적인 과정에 개입 가능, 번들링의 전체적인 과정에 여러가지 일들을 할 수 있음bundle 파일의 변화를 줌개발 모드에서 개발 편의성을 제공production 모드에서 코드의 최적화를 제공웹
6.[Webpack 알아보기] #6 - Loader란?
모듈을 입력받아 처리하는 과정과 관련된 속성웹팩이 의존성 그래프를 완성시키는 과정에서 의존 관계를 갖는 다양한 타입의 모듈들을 입력받고 처리하는 역할모듈을 해석할 때 js파일이나 json파일을 기본 모듈로 봄만약 다른 파일을 모듈로 불러와서 사용하게 될 경우, load
7.[Webpack 알아보기] #7 - Minification란?
네트워크를 통해 전송되는 리소스들의 양이 커지면 사용자들에게 전달되는 컨텐츠들의 도착시간이 길어짐→ 최종적으로 사용자에게 전달되는 리소스들의 형태는 불필요한 요소들을 제거해준 최적화된 상태가 되어 있어야 함어플리케이션이 동작하는 과정에 관여하지 않는 요소들 제거 → 용
8.[Webpack 알아보기] #8 - BrowserList란?
지원하고자 하는 브라우저들에 대한 설정package.json에 정의browserslist 문서에서 권장하는 방식.browserslistrc 파일에 정의브라우저 지원 범위에 대한 값을 작성browserslist와 관련된 플러그인이 해당 파일을 참조하여 작성된 브라우저 범
9.[Webpack 알아보기] #9 - Webpack-dev-server란?
실시간으로 리로드가 되는 웹팩의 개발 서버파일의 변화를 감지했을 때 다시 빌드를 실행하는 watch라는 옵션이 적용되어 있음라이브 리로딩 환경 제공→ 수정사항 반영될 때마다 빌드 + 리프레시 자동 적용dev-server는 dist 폴더와 관계없이 동작→ 빌드 결과물이
10.[Webpack 알아보기] #10 - Webpack 기본 개념 정리
Webpack의 기본 개념들을 알아보자!