Upload
-
View
962
Download
2
Embed Size (px)
Citation preview
---------- 1
FRONTENDBUILD-WEBPACK
https://fb.com/me.adunhansahttps://twitter.com/arahansa
http://adunhansa.tistory.com/
ABOUT
CONTACT
SOURCE
1
1. 작성자 소개 2-----------------------
--------------------------------------------평소 정리를 즐겨합니다. 한 때
동영상강좌도
만들다보니.. 비실명과 만화캐릭터를
쓰네요
양해 부탁드립니다 ㅎㅎ
시작 3
• 신림프로그래머 스터디 발표자료입니다.
• -------------------------
• 프론트엔드 빌드.. 욕심은 많았다…하지만..
• 최근 프론트엔드의 대세는 웹팩에서부터 시작을한다고하여..
• 웹팩부터 보려고 했는데 뭐가 이리 많어@_@.. 웹팩보다가날샌 기분이다…
• 웹팩이라도 조금씩 봐보자..
4첫 시작
• 기본은 가장 먼저 여기서부터 시작을 한다.
• 여기저기서 괜히 웹팩을 기웃거리다가여기가 정리가 가장 잘된 것을 알 수있었다… (하지만 소스는 은근 깨지거나빠진게 많았다 ㅠ)https://github.com/AriaFallah/WebpackTutorial/
• 번역하고 안되는 것들 수정해서 넣고확인해본 리파지토리는 다음과 같다.
• https://github.com/arahansa/WebpackTutorial/
추억팔이 5
• Gulp를 정리했던…추억..1년4개월전쯤으로 기억하는데 이미gulp는 덜 쓰게 되는 것인가 ( 좌절 )
• http://www.slideshare.net/meadunhansa/gulp-48608642
• https://github.com/arahansa/learn_gulp
웹팩 기초에서 다룰 것들 6
• E1-가장 기본적인 webpack 번들링(기본구조, 로더)
• E2 – 설정파일 구조
• E3 – 플러그인소개
• E4- 로더와 적용 순서
• E5 – 더 많은 플러그인 ( HTML 플러그인)
• E6 – 웹팩개발서버 ( 설정파일분리, npm 스크립트 )
• E7 – 코드 작성 해본..
• Css extract
• Html reload
기초2(파트2)에서 다룰 것들 7
• E1- babel을 통한 es6 다루기
• E2 – angular 연동
• E3 – React 연동
• E4 – Multiple Bundling
• E5- 웹팩개발서버 조금 더 알아보기
번들링이란 무엇인가? 8
• 모듈에 대한 이야기(https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.hceo4glj2)모듈을 사용하는 이유 : 유지보수, 재사용,NameSpace
모듈패턴(http://www.nextree.co.kr/p4150/ )
번들링이란 무엇인가? 9
• 모듈화
• http://d2.naver.com/helloworld/12864
• https://medium.freecodecamp.com/javascript-modules-part-2-module-bundling-5020383cf306#.enu302b5v
E1-가장 기본적인 webpack번들링(기본구조, 로더)
10
E2 – 설정파일 구조 11
E3 – 플러그인소개 12
• UglifyjsPlugin, OccurrenceOrderPlugin나머지 플러그인들은 하면서 종종 소개가됨….
플러그인리스트 13
• https://webpack.github.io/docs/list-of-plugins.html
• https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin
E4 - 로더와 적용 순서 14
E5 – 더 많은 플러그인 ( HTML 플러그인) 15
E6 – 웹팩개발서버 ( 설정파일분리, npm스크립트 )
16
웹팩개발서버 가이드문서 17
• https://arahansa.github.io/learnwebpack/webpack-dev-server.html
• 기억해볼만한 것 : 프록시, 세이프write
Css Extract 18
• Extract설정
HTML Reload 19
ES lint 20
• https://medium.com/@tkssharma/eslint-in-react-babel-webpack-9cb1c4e86f4e#.6mpsicf8j
참조할 Multiple bundle 21
• 추가중..https://github.com/jcreamer898/webpack-express-starter/blob/master/webpack.config.js
추가로 얘기했던 웹팩 개발서버 22
• 웹팩 개발 서버 번역https://arahansa.github.io/learnwebpack/webpack-dev-server.html
• 웹팩개발 서버 프론트엔드
• https://github.com/arahansa/learnwebpack
• 잠깐 만든 웹팩 개발서버 백엔드 서버
• https://github.com/arahansa/learn_webpack_backend
23
THANK YOU !즐거운 개발됩시다.
아라한사 올림
arahansa------
------
페북 : https://fb.com/me.adunhansa트위터 : https://twitter.com/arahansa
블로그: http://adunhansa.tistory.com/사이트 : http://arahansa.com