Advanced Webpack

A. Code Splitting

B. Hot Module Replacement (HMR)

C. Loaders

주요 기능

Code SplittingWebpack은 파일의 dependency를 읽는다

Code Splitting

그런데 파일이 크다면 로딩 시간이 길어진다!

Code SplittingOn-demand Loading

Code Splittingchunk로 나눠진다

Chunk Loading하기JSONP로 로딩

HMR바뀐 모듈만 재빌드, 브라우저 새로고침 없이 로딩 가능

Demo

HMR

npm install webpack-dev-server

webpack-dev-server —hot —inline

HMR

The webpack-dev-server is a little Node.js Express server, which uses the webpack-dev-middleware to serve a webpack bundle. It also has a little runtime which is

connected to the server via Sock.js.

—webpack doc—

?????????

HMR

HMRWebpack Compiler: JS 코드를 bundle로 컴파일

HMRHMR Server: 업데이트를 HMR Runtime에 제공

HMRHMR Runtime: bundle.js에 삽입되는 코드.

HMR Server와 통신하고 코드를 업데이트

HMRBundle Server: bundle.js를 client로 제공

HMR1. 파일 수정

HMR2. 파일 시스템이 웹팩에게 파일 변경 알림

HMR3. 웹팩 컴파일러가 변경된 모듈들을 다시 빌드하고 HMR 서버에 알림

HMR3. 웹팩 컴파일러가 변경된 모듈들을 다시 빌드하고 HMR 서버에 알림

manifest json 파일과 업데이트된 js 파일 생성

HMRmanifest json

<previous-hash>.hot-update.json

HMRupdated chunk js

<chunkNumber>.<previous-hash>.hot-update.js

HMR4. HMR 서버는 client에게 웹소켓으로 업데이트 알림

HMR그리고 HMR Runtime이 업데이트 파일들을 요청

HMR5. HMR Runtime 은 코드의 수정된 모듈들을 업데이트

HMR

The webpack-dev-server is a little Node.js Express server, which uses the webpack-dev-middleware to serve a webpack bundle. It also has a little runtime which is

connected to the server via Sock.js.

—webpack doc—

다시 돌아가서..

Loaders다양한 파일들을 로딩할 수 있게 해주는 로더

Loaders로더는 function을 반환하는 노드모듈이다

Loaders정말 간단한 json-loader