webpack이란

서로 연관되어 있는 웹자원들을 js,css,img와 같은 스태틱한 자원으로 변환해주는 모듈 번들러

webpack탄생&배경

1. 새로운 형태의 Web Task Manager

기존의 Web Task Manager(Gulp,Grunt)의 기능 + 모듈 의존성 관리

2. 자바스크립트 Code Based Modules관리

자바스크립트 모듈화의 필요성: AMD,CommonJS,ES6(Modules) 기존 모듈 로더들과의 차이점: 모듈 간의 관계를 청크(Chunk)단위로 나눠 필요할 때 로딩

자바스크립트 모듈화 문제란

<script src="app.js" />
<script src="app2.js" />
<script src="app3.js" />

상기 모듈 로딩 방식의 문제점: 전역변수 충돌, 스크립트 로딩 순서, 복잡도에 따른 관리상의 문제 이를 해결하기 위해 AMD,CommonJs 그리고 webpack이 등장

Webpack의 철학

1. 모든 웹자원이 모듈형태로 로딩 가능
2. 초기에 불필요한것을 로딩하지 않고 필요한것만 로딩해서 사용

Entry

1개 또는 2개 이상의 엔트리 포인트를 설정가능

Output

entry에서 설정하고 묶은 파일의 결과값 설정

Output Name Option

Loader

loader를 이용해서 다른 형태의 웹자원들(img,css등)을 js로 변환하여 로딩 loader에서 모듈 로딩 순서는 배열의 요소에 오른쪽에서 왼쪽으로 진행됨

test use

Plugin

플러그인은 파일별 커스텀 기능을 사용하기위해 사용 ex) JS minification, file extraction, alias(별칭)

loader vs plugin

webpack번들링을할떄 중간에 개입하는 loader

번들링이 끝나고 결과를 낼때 관여하는게 plugin

plugins: [
    new webpack.optimize.UglifyJsPlugin()
    //...
]

특정 조건에 맞춰 어떤 액션을 실행

mode

webpack4에서 추가된 기능

모드에는 development、production、none가 존재

development,production을 지정하면 여러가지 설정이 ON되는데 예를들어 production으로 기동하면 optimization.minimizer라는 설정이 ON되어 압축된 파일을 출력함

설정은 webpack.config.js에 기술하면 덮어쓰기 가능

entry

엔트리 포인트 설정 복수의 설정이 가능

엔트리 포인트는 모듈간의 의존관계를 해석을 시작하는 시작점같은곳 각 모듈을 읽어서 메인 처리를 하는 JavaScript파일에 임포트하는 방식이 좋음

output

출력관련 설정 출력은 파일명이 패스등을 지정가능 OS에 따른 의존성을 막기위해 path.join()을 사용

• ← Previous Post
• Next Post →