Thumbnail
BEST 개발 ・ 프로그래밍 웹 개발
쉽게 배우는 Webpack
(4.1)
38개의 수강평 ∙ 986명의 수강생
공개되지 않은 강의로
수강이 제한됩니다.
지식공유자 : 장기효(캡틴판교)
총 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 | 장기효님 인터뷰 보러가기


안녕하세요
장기효(캡틴판교) 입니다.
장기효(캡틴판교)의 썸네일

안녕하세요. 우리의 성장에 관심이 많은 웹 개발자입니다. 인프런에서 5년째 지식을 공유하고 있습니다.  지금까지 제 강의에 많은 응원과 격려를 보내주신 만큼 앞으로도 더 좋은 컨텐츠로 찾아뵙겠습니다. 감사합니다 😄  프론트엔드 개발 관련 컨텐츠가 더 보고 싶다면(클릭)

커리큘럼 총 51개 ˙ 3시간 26분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 2. Webpack Entry
Entry 소개 및 유형 03:36
섹션 3. Webpack Output
Output 소개 미리보기 01:36
Output Name 옵션 01:47
[부록] path.join() & path.resolve() 소개 02:40
섹션 4. Webpack Loader
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
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
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
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
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 기타 및 외부 도구 연동
Webpack 주 사용 명령어 02:17
[실습] Watch 옵션 02:53
Sourcemap 활용 03:52
Gulp 연동 01:35
Hot Module Replacement 01:34
섹션 11. [최종 프로젝트] Vue Loader 해석
Vue.js CLI로 생성한 Webpack 설정파일 분석 10:34
강의 게시일 : 2017년 10월 10일 (마지막 업데이트일 : 2018년 12월 05일)
수강평 총 38개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.1
38개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
최재현 thumbnail
좋네용 대충대충 아 그냥 이렇구나 하고 넘어갔던 설정들에 대한 기본기를 탄탄하게 다시 잡아준 강의였습니다.
2017-10-12
jude thumbnail
웹팩에 대해 기본적인 지식을 알 수 있었던 강의였던거 같아요, 알아두면 좋은 문서들 추천이 많아서 좋았습니다.
2020-02-17
OCK Sam thumbnail
버전이 달라지긴 했지만, 이또한 공부라 생각하고 달라진 부분을 직접 찾아서 구현함으로써 공부하는데 도움이 많이 되었습니다! 갓틴갓교 감사합니당
2019-07-27
sc thumbnail
좋은 강의 잘봤습니다! 웹팩에 개념이 없었는데 조금씩 잡혀가고 있어요. 웹팩 핸드북도 같이 보고 있는데 도움이 많이 되는것 같아요!
2020-02-01
류재준 thumbnail
웹팩을 잘 몰랐는대 기본적인 개념과 사용법을 익힐수 있었습니다. 감사합니다. 혹시 참고 자료는 어디서 볼수 있을까요? 마지막 웹팩 중급,고급을 위한 참고자료 안내 자료 부분이 궁금합니다.
2020-01-27
공개되지 않은 강의로
수강이 제한됩니다.
지식공유자 : 장기효(캡틴판교)
총 51개 수업˙총 3시간 26분
평생 무제한 수강
수료증 발급 강의
초급 대상
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스