📱인프런 모바일 App 😆
쉽게 배우는 Webpack

쉽게 배우는 Webpack

(20개의 수강평)

754명의 수강생

38,500원

평생
초급
수료증
51개 수업, 총 3시간 31분
위시리스트 추가

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 | 장기효님 인터뷰 보러가기

지식공유자 소개

장기효(캡틴판교)

교육과정

Webpack 소개
수업 소개
06 : 00
수업 개요
02 : 00
Webpack 이란?
02 : 00
Webpack 을 사용하는 이유 & 배경
05 : 00
[부록] 자바스크립트 모듈화 문제란?
02 : 00
Webpack 철학
02 : 00
[개발환경] Webpack 개발환경 설정 : Atom, Chrome, Node.js, NPM, Github 설치
02 : 00
Webpack CLI 설치
01 : 00
[실습] Webpack 시작하기
16 : 00
[실습] 번들링된 파일 bundle.js 분석
03 : 00
[부록] Webpack을 위한 NPM 소개
NPM 소개
03 : 00
[실습] NPM 명령어 & package.json 파일
03 : 00
[실습] NPM 지역 & 전역 설치 (Local & Global Install)
05 : 00
[실습] NPM install --save 와 --save-dev
03 : 00
Webpack Entry
Entry 소개 및 유형
04 : 00
Webpack Output
Output 소개
02 : 00
Output Name 옵션
02 : 00
[부록] path.join() & path.resolve() 소개
03 : 00
Webpack Loader
Loader 소개
03 : 00
Babel Loader
03 : 00
[실습] CSS Code Splitting 1 - Bundling libraries
13 : 00
[실습] CSS Code Splitting 2 - Extract Text Plugin
08 : 00
Webpack Plugins
Plugin 소개
03 : 00
Plugin 종류
03 : 00
[실습] Libraries Codes Splitting 1 - Bundling libraries
09 : 00
[실습] Libraries Codes Splitting 2 - Common Chunks Plugin
05 : 00
[실습] Libraries Codes Splitting 3 - Manifest Plugin
02 : 00
Webpack Resolve
Resolve 소개
02 : 00
Resolve Option
04 : 00
[실습] Resolve Modules 1 - Bundling libraries
04 : 00
[실습] Resolve Modules 2 - Resolve Alias
08 : 00
[실습] Resolve Modules 3 - Provide Plugins
03 : 00
중간정리
전반부 내용 정리 및 후반부 내용 소개
03 : 00
Webpack Dev Server
Webpack 빌드를 위한 서버 구성
02 : 00
Webpack Dev Server 소개
02 : 00
Webpack Dev Server Option
03 : 00
[실습] Webpack Dev Server 1 - Server 구성 및 실행
08 : 00
[실습] Webpack Dev Server 2 - Dev Server 인메모리 컴파일의 특징
03 : 00
[부록] Path vs Public Path 소개
03 : 00
[부록] Path vs Public Path 사례
02 : 00
Webpack Dev Middleware
Webpack Dev Middleware 소개
03 : 00
[실습] Webpack Dev Middleware - Node.js로 로컬 서버 구성
09 : 00
[실습] Webpack Dev Middleware
12 : 00
[부록] Webpack 1.x 공식 문서와 3.x 공식 문서의 차이점
01 : 00
Webpack 기타 및 외부 도구 연동
Webpack 주 사용 명령어
02 : 00
[실습] Watch 옵션
03 : 00
Sourcemap 활용
04 : 00
Gulp 연동
02 : 00
Hot Module Replacement
02 : 00
[최종 프로젝트] Vue Loader 해석
Vue.js CLI로 생성한 Webpack 설정파일 분석
10 : 00
마무리
웹팩 중급, 고급을 위한 참고 자료 안내
01 : 00

수강 후기

4.0
20개의 수강평
OCK Sam 21일 전
버전이 달라지긴 했지만, 이또한 공부라 생각하고 달라진 부분을 직접 찾아서 구현함으로써 공부하는데 도움이 많이 되었습니다! 갓틴갓교 감사합니당
최재현 2017.10.12
좋네용 대충대충 아 그냥 이렇구나 하고 넘어갔던 설정들에 대한 기본기를 탄탄하게 다시 잡아준 강의였습니다.