공식사이트
webpack 가이드
Webpack 이란?
웹브라우저에서 웹페이지를 프로그래밍 쪽, 또는 동적으로 제어하는 기술인 js를 더 잘 따르기위한 번들러
노드js로 만들어진 프로그램을 설치해주는 npm이해가 필요하다.
- npm: url로 개발소스 가져오기(dependencies in package.json)
npm대충은 알지만 노드js공부하자..
웹팩은 웹에서 사용되는 모든 자원을 번들링 해주는 도구.
번들링란 여러개의 파일 중에 필요한 의존성들이 존재하는 파일을 하나의 파일로 묶어 패키징을 시키는 과정.
웹팩3 웹팩4차이: webpack-cli있어야 커맨드라인에 webpack명령어사용가능
npm i -g webpack webpack-cli && npm i -D webpack webpack-cli
아래처럼, 무수한 파일들이 webpack을 거치면 단순한 형태의 파일들로 만들어진다.
Webpack의 필요성, 쓰는 이유
어떻게하면 다양한 형태의 파일들을 웹페이지에 잘 적용하도록, 어떤 방법으로 전달 해줄것인가?
웹사이트를 만들때 html css js등 수많은 파일생김
서버와의 접속이 많을수록(네트워킹 요청횟수) 애플리케이션은 느리게 돌아감
많은 패키지들을 사용하다보면 각각의 서로다른 패키지들, 서로같은 이름의 변수나 함수를 사용하면서 어플리케이션이 깨지기됨
해결도구 -> 번들러 여러개의 파일들을 묶어준다
중복 소스코드를 최소화, 모듈개념 사용, 글로벌 오염줄인다
1번 파일에서 2번 파일에 있는 함수를 호출해야 할 경우 스크립트를 불러오는 순서를 2번파일을 제일 상단에 올려놓고 1번 파일을 그 다음에 불러와지도록 선언을 했는데 이제는 모듈이라는 개념을 사용해 1번파일에서 2번파일을 불러오기만 하면 됩니다.
동시에 성능을 향상시키기 위해서 필요하다면 다시 분리할수도 있다.
아주많은 기능들의 작업을 자동화 할수있다.
뒤로갈수록 기능이 떨어질수있다.
웹팩없이 웹사이트 만들기란?
모듈이란 무엇인가?
webpack을 실행하는 명령어
프로젝트가 커질수록 웹팩명령어가 복잡해짐.
가이드 configuration참고
webpack 가이드
Webpack으로 js파일 빌드하기
Webpack 기본 4단계?
1. Entry
커맨드라인에서 명령어 옵션을 줄수도있고
컨피그파일에다가 파일에 속성으로 줄수 있다.
2. Output
3. Loader
4. Plugin
Babel
바벨은 자바스크립트 es6 문법을 es5로 변환해주는 트렌스파일러(transpiler) 입니다. 이것을 통해 React를 일반 브라우저에서 실행시킬 수 있습니다. babel 공식 사이트에서 간단하게 es6 문법으로 변환된 자바스크립트 코드를 확인할 수 있습니다.
