Webpack
인프런 프론트엔드 개발자를 위한 웹팩 / 장기효(캡틴판교)
Node.js와 NPM
웹팩을 사용하기 위해 Node.js와 NPM이 설치되어 있어야 함 Node.js를 설치하면 NPM은 함께 설치가 됨
Node.js
브라우저 밖에서도 자바스크립트를 실행할 수 있는 환경을 의미
NPM(Node Package Manager)
자바스크립트 라이브러리(패키지)를 관리해주는 도구(jQuery, Tensorflow, express 등) 라이브러리를 공개된 저장소에 올려놓고 npm 명령어로 편하게 다운로드 받을 수 있음
node -v
: 노드 버전 확인npm -v
: NPM 버전 확인npm init [-y]
: NPM 초기화 명령어(-y 기본값으로 package.json파일 생성)npm install [library] (--save-prod)
: 라이브러리 지역 설치1(node_modules/library/dist/library.js)npm install [library] --save-dev(-D)
: 라이브러리 지역 설치2(devDependencies로 관리)npm uninstall [library]
: 라이브러리 삭제npm install [library] --global(-g)
: 라이브러리 시스템 레벨에 전역(global)으로 설치
지역 설치 vs 전역 설치
지역 설치 : 해당 폴더 내에서 node_modules 폴더를 생성하여 설치
전역 설치 : 시스템 레벨에 전역으로 설치하여 터미널에서 라이브러리 이름을 입력했을때 명령어로 인식
NPM을 사용하는 이유
프로젝트에 사용하는 package(라이브러리)와 버전 관리
해당 package CDN을 직접 찾아서 가져오지 않고 npm install로 바로 설치 가능
대부분의 웹팩 프로젝트는 기본적으로 npm이 동반됨
dependencies와 devDependencies
dependencies : npm i [library]
애플리케이션의 화면로직과 직접적 관련이 있는 라이브러리(ex.jquery, vue, react, angular, chart 등)
devDependencies : npm i [library] -D
개발을 할때 도움을 주는 개발 보조 라이브러리(ex.webpack, sass, js-compression 등)
배포용 라이브러리 dependencies
npm run build
로 빌드를 하면 최종 애플리케이션 코드 안에 포함됨
개발용 라이브러리 devDependencies
최종 배포 시 포함되지 않음
웹팩 Webpack
프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler) 모듈 번들러란? 웹 애플리케이션을 구성하는 자원을 모두 각각 모듈로 보고 조합해서 병합된 하나의 결과물을 만드는 도구
webpack webpack-cli
lodash
dist/main.js
: 웹팩으로 구성한 결과물(즉시실행함수IIFE 구성)자바스크립트만을 위한 도구가 아닌 웹을 구성하는 모든 리소스에 대한 도구임
devtool: 'source-map'
: 빌드 후 원래 파일로 연결
모듈 번들링이란?
웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축해주는 동작(빌드==변환==번들링)
모듈 이란?
프로그램에서 특정 기능을 갖는 작은 코드 단위를 의미
웹팩의 등장배경
파일 단위의 자바스크립트 모듈 관리
파일단위로 스코프가 구분되지 않음(전역변수)
웹 개발 작업 자동화 도구
웹 애플리케이션의 빠른 로딩 속도와 높은 성능
웹팩은 기본적으로 필요한 자원은 미리 로딩하는게 아니라 그 때 그 때 요청하자는 철학을 갖고 있음
웹팩으로 해결하려는 문제
브라우저별 HTTP 요청 숫자의 제약
TCP 스펙에 따라 브라우저에서 한번에 서버로 보낼 수 있는 HTTP요청 숫자는 제약되어 있음
Dynamic Loading & Lazy Loading 미지원
웹팩의 주요속성
mode
버전4 이상에서 추가된 속성
'none'
'production'
'development'
Entry
웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일, 경로
웹 애플리케이션의 전반적인 구조와 내용이 담김
Output
웹팩을 돌리고 난 결과물의 파일 경로
최소한
filename
은 지정해줘야함파일 이름 옵션에 매 빌드시 고유 해시값을 붙여 새로고침해야하는 상황을 방지할 수 있음
Loader(module)
웹팩이 웹 애플리케이션을 해석할때 자바스크립트 파일이 아닌 웹 자원들을 변환할 수 있도록 도와주는 속성
plugin(plugins)
웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성
플러그인은 결과물의 형태를 바꾸는 역할
Webpack Dev Server
웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구 웹팩의 빌드 대상 파일이 변경 되었을 때 코드만 변경하고 저장하면 웹팩으로 빌드한 후 새로고침 해줌 웹팩의 빌드 시간 또한 줄여줌
웹팩 데브 서버로 빌드한 결과물은 메모리에 저장되고 파일로 생성하지 않음(파일 시스템에 나오지 않음)
웹팩 데브 서버는 개발할 때만 사용하다가 완료되면 웹팩 명령어를 이용해 결과물을 파일로 생성
컴퓨터 구조 관점에서 파일 입출력보다 메모리 입출력이 더 빠르고 자원이 덜 소모됨
Last updated