쉽게 배우는 Webpack

쉽게 배우는 Webpack

(36개의 수강평)

986명의 수강생
WebpackBundling
공개되지 않은 강의입니다.
지식공유자 · 장기효(캡틴판교)
51회 수업· 총 3시간 26분수업
평생 무제한 시청
수료증 발급 강의
수강 난이도 초급

이 강의는

최신 프론트엔드 프레임워크(React, Angular, Vue)에서 필수로 사용되는 도구인 Webpack의 기본 개념을 학습하는 강좌입니다. 본 수업을 통해 Webpack의 배경과 사상에 대해 이해하고, Webpack 설정 파일을 쉽게 분석 및 커스터마이징이 가능하도록 수강생의 역량을 향상시키는데 목적을 두고 있습니다.

"웹팩 리뉴얼 강좌가 3월 18일(수)에 개시되었습니다."

"리뉴얼 강의 무료 쿠폰은 새소식의 공지 사항을 참고하세요 😄"

1. 강좌 소개

최신 프론트엔드 프레임워크(React, Angular, Vue)에서 필수로 사용되는 도구인 Webpack의 기본 개념을 학습하는 강좌입니다. Webpack에 막연한 두려움을 가지고 계신 프론트엔드 입문 개발자, 웹 개발자를 대상으로 합니다. 본 수업을 통해 Webpack의 배경과 사상에 대해 이해하고, Webpack 설정 파일을 쉽게 분석하고 커스터마이징이 가능하도록 수강생의 역량을 향상시키는 수업을 목표 로합니다. 복잡하기로 악명 높은 Webpack의 설정을 쉽게 이해하기 위해, 각 속성들의 역할 간단히 설명 -> 강사가 라이브 코딩 -> 준비된 예제로 수강생이 실습형태로 수업을 진행합니다. Webpack의 주요 속성인 Entry, Output, Loader, Plugin, Resolve 등을 다루고, 웹팩을 이용한 개발환경 구성 방법과 기타 웹 자동화 도구와의 연동 방법 등을 학습하여 기본 개념뿐만 아니라 실제로 서비스와 실무에 적용할 수 있게끔 교과과정을 구성하였습니다.

웹팩 핸드북 사이트 소개

위 사이트는 강의를 들으실 때 함께 보면 좋습니다 😁 (클릭하면 사이트로 접근할 수 있습니다)

2. 누구에게 도움이 되나요?

  • Webpack이 뭔지 모르시는 분
  • Webpack은 들어봤으나 설정 파일을 열면 겁을 먹는 분
  • Webpack 공식 문서를 보다가 마우스 던지신 분
  • Webpack을 배우고 싶은데 마땅한 참고 자료가 없으신 분
  • 이 이미지를 보고 뭔 소리인지 모르시겠다는 분들은 다 들으시면 됩니다.

 

3. 어떤 걸 배우나요?

Webpack 주요 속성 Webpack 개발환경 구성 부록
  • Entry
  • Output
  • Loader
  • Plugin
  • Resolve
  • Webpack Dev Server
  • Webpack Dev Middleware
  • 개발자 도구 연동
  • Gulp와 연동
  • NPM(Node Package Manager) 소개 및 사용법
  • 자바스크립트 모듈화
  • Node Path API

4. 강좌 특징

설정이 복잡할수록 작은 단위부터 차례차례 학습을 하셔야 큰 그림을 그릴 수 있습니다. 각 주요 속성들에 대해서 간단히 설명 후 강사의 라이브 코딩 -> 준비된 예제에 따라 수강생이 실습하도록 교과과정을 구성하였습니다. 이 방식으로 수강생분들이 쉽고 빠르게 Webpack을 따라 할 수 있도록 구성하였습니다. 또한, 많이들 궁금해하는 웹팩을 왜 사용해야 하는가? 웹팩의 배경, 웹팩 사용에 필요한 선수지식(NPM, 자바스크립트 모듈화)과 기타 기술들(Node.js, Gulp)을 미리 다 설명드리고, 자세한 설정을 살펴보기 때문에 한 편의 이야기와 같은 수업입니다.

5. 강사 소개

장기효 (캡틴판교)


[프로필]

  인프런이 만난 사람 #02 | 장기효님 인터뷰 보러가기

교육과정

모두 펼치기 51 강의 3시간 26분
섹션 2. Webpack Entry
1 강의 03 : 36
Entry 소개 및 유형
03 : 36
섹션 3. Webpack Output
3 강의 06 : 03
Output 소개
01 : 36
Output Name 옵션
01 : 47
[부록] path.join() & path.resolve() 소개
02 : 40
섹션 4. Webpack Loader
4 강의 27 : 09
Loader 소개
03 : 02
Babel Loader
03 : 10
[실습] CSS Code Splitting 1 - Bundling libraries
12 : 43
[실습] CSS Code Splitting 2 - Extract Text Plugin
08 : 14
섹션 5. Webpack Plugins
5 강의 21 : 31
Plugin 소개
02 : 45
Plugin 종류
02 : 46
[실습] Libraries Codes Splitting 1 - Bundling libraries
09 : 14
[실습] Libraries Codes Splitting 2 - Common Chunks Plugin
04 : 47
[실습] Libraries Codes Splitting 3 - Manifest Plugin
01 : 59
섹션 6. Webpack Resolve
5 강의 18 : 35
Resolve 소개
02 : 22
Resolve Option
03 : 39
[실습] Resolve Modules 1 - Bundling libraries
04 : 32
[실습] Resolve Modules 2 - Resolve Alias
05 : 24
[실습] Resolve Modules 3 - Provide Plugins
02 : 38
섹션 8. Webpack Dev Server
7 강의 24 : 07
Webpack 빌드를 위한 서버 구성
02 : 00
Webpack Dev Server 소개
01 : 42
Webpack Dev Server Option
03 : 16
[실습] Webpack Dev Server 1 - Server 구성 및 실행
08 : 11
[실습] Webpack Dev Server 2 - Dev Server 인메모리 컴파일의 특징
03 : 12
[부록] Path vs Public Path 소개
03 : 24
[부록] Path vs Public Path 사례
02 : 22
섹션 9. Webpack Dev Middleware
4 강의 24 : 51
Webpack Dev Middleware 소개
03 : 03
[실습] Webpack Dev Middleware - Node.js로 로컬 서버 구성
08 : 46
[실습] Webpack Dev Middleware
12 : 04
[부록] Webpack 1.x 공식 문서와 3.x 공식 문서의 차이점
00 : 58
섹션 10. Webpack 기타 및 외부 도구 연동
5 강의 12 : 11
Webpack 주 사용 명령어
02 : 17
[실습] Watch 옵션
02 : 53
Sourcemap 활용
03 : 52
Gulp 연동
01 : 35
Hot Module Replacement
01 : 34
섹션 11. [최종 프로젝트] Vue Loader 해석
1 강의 10 : 34
Vue.js CLI로 생성한 Webpack 설정파일 분석
10 : 34

공개 일자

2017년 10월 10일 (마지막 업데이트 일자 : 2018년 12월 5일)

수강 후기

4.1
36개의 수강평
59df3fa18d647-bpfull.jpg
최재현 2017.10.12
좋네용 대충대충 아 그냥 이렇구나 하고 넘어갔던 설정들에 대한 기본기를 탄탄하게 다시 잡아준 강의였습니다.
default_profile.png
jude 4달 전
웹팩에 대해 기본적인 지식을 알 수 있었던 강의였던거 같아요, 알아두면 좋은 문서들 추천이 많아서 좋았습니다.
default_profile.png
OCK Sam 11달 전
버전이 달라지긴 했지만, 이또한 공부라 생각하고 달라진 부분을 직접 찾아서 구현함으로써 공부하는데 도움이 많이 되었습니다! 갓틴갓교 감사합니당
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스