23
---------- 1 FRONTENDBUILD -WEBPACK https://fb.com/me.adunhansa https://twitter.com/arahansa http ://adunhansa.tistory.com/ ABOUT CONTACT SOURCE 1

신림프로그래머 스터디 웹팩 발표자료

  • Upload
    -

  • View
    962

  • Download
    2

Embed Size (px)

Citation preview

Page 1: 신림프로그래머 스터디 웹팩 발표자료

---------- 1

FRONTENDBUILD-WEBPACK

https://fb.com/me.adunhansahttps://twitter.com/arahansa

http://adunhansa.tistory.com/

ABOUT

CONTACT

SOURCE

1

Page 2: 신림프로그래머 스터디 웹팩 발표자료

1. 작성자 소개 2-----------------------

--------------------------------------------평소 정리를 즐겨합니다. 한 때

동영상강좌도

만들다보니.. 비실명과 만화캐릭터를

쓰네요

양해 부탁드립니다 ㅎㅎ

Page 3: 신림프로그래머 스터디 웹팩 발표자료

시작 3

• 신림프로그래머 스터디 발표자료입니다.

• -------------------------

• 프론트엔드 빌드.. 욕심은 많았다…하지만..

• 최근 프론트엔드의 대세는 웹팩에서부터 시작을한다고하여..

• 웹팩부터 보려고 했는데 뭐가 이리 많어@_@.. 웹팩보다가날샌 기분이다…

• 웹팩이라도 조금씩 봐보자..

Page 4: 신림프로그래머 스터디 웹팩 발표자료

4첫 시작

• 기본은 가장 먼저 여기서부터 시작을 한다.

• 여기저기서 괜히 웹팩을 기웃거리다가여기가 정리가 가장 잘된 것을 알 수있었다… (하지만 소스는 은근 깨지거나빠진게 많았다 ㅠ)https://github.com/AriaFallah/WebpackTutorial/

• 번역하고 안되는 것들 수정해서 넣고확인해본 리파지토리는 다음과 같다.

• https://github.com/arahansa/WebpackTutorial/

Page 5: 신림프로그래머 스터디 웹팩 발표자료

추억팔이 5

• Gulp를 정리했던…추억..1년4개월전쯤으로 기억하는데 이미gulp는 덜 쓰게 되는 것인가 ( 좌절 )

• http://www.slideshare.net/meadunhansa/gulp-48608642

• https://github.com/arahansa/learn_gulp

Page 6: 신림프로그래머 스터디 웹팩 발표자료

웹팩 기초에서 다룰 것들 6

• E1-가장 기본적인 webpack 번들링(기본구조, 로더)

• E2 – 설정파일 구조

• E3 – 플러그인소개

• E4- 로더와 적용 순서

• E5 – 더 많은 플러그인 ( HTML 플러그인)

• E6 – 웹팩개발서버 ( 설정파일분리, npm 스크립트 )

• E7 – 코드 작성 해본..

• Css extract

• Html reload

Page 7: 신림프로그래머 스터디 웹팩 발표자료

기초2(파트2)에서 다룰 것들 7

• E1- babel을 통한 es6 다루기

• E2 – angular 연동

• E3 – React 연동

• E4 – Multiple Bundling

• E5- 웹팩개발서버 조금 더 알아보기

Page 8: 신림프로그래머 스터디 웹팩 발표자료

번들링이란 무엇인가? 8

• 모듈에 대한 이야기(https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.hceo4glj2)모듈을 사용하는 이유 : 유지보수, 재사용,NameSpace

모듈패턴(http://www.nextree.co.kr/p4150/ )

Page 9: 신림프로그래머 스터디 웹팩 발표자료

번들링이란 무엇인가? 9

• 모듈화

• http://d2.naver.com/helloworld/12864

• https://medium.freecodecamp.com/javascript-modules-part-2-module-bundling-5020383cf306#.enu302b5v

Page 10: 신림프로그래머 스터디 웹팩 발표자료

E1-가장 기본적인 webpack번들링(기본구조, 로더)

10

Page 11: 신림프로그래머 스터디 웹팩 발표자료

E2 – 설정파일 구조 11

Page 12: 신림프로그래머 스터디 웹팩 발표자료

E3 – 플러그인소개 12

• UglifyjsPlugin, OccurrenceOrderPlugin나머지 플러그인들은 하면서 종종 소개가됨….

Page 13: 신림프로그래머 스터디 웹팩 발표자료

플러그인리스트 13

• https://webpack.github.io/docs/list-of-plugins.html

• https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin

Page 14: 신림프로그래머 스터디 웹팩 발표자료

E4 - 로더와 적용 순서 14

Page 15: 신림프로그래머 스터디 웹팩 발표자료

E5 – 더 많은 플러그인 ( HTML 플러그인) 15

Page 16: 신림프로그래머 스터디 웹팩 발표자료

E6 – 웹팩개발서버 ( 설정파일분리, npm스크립트 )

16

Page 17: 신림프로그래머 스터디 웹팩 발표자료

웹팩개발서버 가이드문서 17

• https://arahansa.github.io/learnwebpack/webpack-dev-server.html

• 기억해볼만한 것 : 프록시, 세이프write

Page 18: 신림프로그래머 스터디 웹팩 발표자료

Css Extract 18

• Extract설정

Page 19: 신림프로그래머 스터디 웹팩 발표자료

HTML Reload 19

Page 20: 신림프로그래머 스터디 웹팩 발표자료

ES lint 20

• https://medium.com/@tkssharma/eslint-in-react-babel-webpack-9cb1c4e86f4e#.6mpsicf8j

Page 21: 신림프로그래머 스터디 웹팩 발표자료

참조할 Multiple bundle 21

• 추가중..https://github.com/jcreamer898/webpack-express-starter/blob/master/webpack.config.js

Page 22: 신림프로그래머 스터디 웹팩 발표자료

추가로 얘기했던 웹팩 개발서버 22

• 웹팩 개발 서버 번역https://arahansa.github.io/learnwebpack/webpack-dev-server.html

• 웹팩개발 서버 프론트엔드

• https://github.com/arahansa/learnwebpack

• 잠깐 만든 웹팩 개발서버 백엔드 서버

• https://github.com/arahansa/learn_webpack_backend

Page 23: 신림프로그래머 스터디 웹팩 발표자료

23

THANK YOU !즐거운 개발됩시다.

아라한사 올림

arahansa------

------

페북 : https://fb.com/me.adunhansa트위터 : https://twitter.com/arahansa

블로그: http://adunhansa.tistory.com/사이트 : http://arahansa.com