실무에서 웹팩을 사용하고 있었지만...
자세하게 세팅을 확인하지 않고 사용하고 있었는데
웹팩과 친해지기 위해서 웹팩을 기초 지식들을 정리해 보았다!
node, npm
node.js는 자바스크립트 실행환경이라고 보면된다.
npm - node package manager
LTS - long term support
node를 설치하면 npm도 설치가 된다!
package.json 초기설정
npm init (명령창에서 기본 정보를 입력할 수 있다.)
npm init -y (기본값을 세팅해서 package.json으로 만들어줍니다.)
npm의 필요성
웹페이지는 유연해서 스크립트가 어디에 오든 동작한다.
라이브러리가 많아지는 경우 서로 영향을 미치는 경우가 있어 관리가 필요하다.
npm의 장점
- 라이브러리 관리가 용이
- 사용 용이
다른 스크립트 파일처럼 인터넷으로 찾고 코드를 가져오고 하지 않아도 된다.
명령창에서 install만 하면 설치하고 사용할 수 있다.
dependencies, devDependencies
dependencies에는 어플리케이션 로직과 관련이 있는 라이브러리
DOM을 움직이거나 등등....
ex ) react, 앵귤러, 차트같은 것들
devDependencies는 개발보조 라이브러리는
ex ) Webpack, js-compression, sass
dependencies 배포용 dev devDependencies 개발용
배포할때(npm run build) 개발용은 빌드가 안된다.
dependencies에 필요없는 라이브러리가 들어가면 빌드가 엄청 오래걸린다.
npm라이브러리 설치
npm install gulp --global : 전역설치
npm install gulp (--save-prod)
npm i gulp : 축약형(위와 동일한 명령어)
npm install gulp --save--dev : devDependencies에 추가가 된다.
(== npm i gulp -D)
webpack,웹팩이란
프론트엔드 프레임워크에서 가장많이 사용되는 모듈 번들러
여러파일들을 해석해서 하나의파일로 만들어주는 모듈번들링
웹팩의 등장배경
- 파일 단위의 자바스크립트 모듈 관리의 필요성
- 웹개발 작업 자동화도구
- 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
웹팩의 장점
- request수가 적어진다.
- js스크립트를 하나로 합치고 한번만 불러온다.
- 자바스크립트만이 아닌 웹페이지를 구성하는 모든 자원들을 위한 것
웹팩으로 해결하려는 문제
- 자바스트립트 변수 유효범위
- 브라우저별 http요청 숫자의 제약 (브라우저별로 한번에 요청숫자가 제한되어있다.)
- 사용하지 않는 코드의 관리
- dynamic loading & lazy loading 미지원
웹팩 꼭알아야하는 특징!
Devtool: 'source-map'-
자바스크립트가 한파일로 묶이는데 빌드전 파일 경로를 확인할수있다.
빌드를 해서 한파일로 만들어도 콘솔찍으면 기존파일로 보게 해준다. -
package.json에 scripts 는 커스텀 명령어를 정할수있는 것이다.
Package.json에 원하는 명령어를 계속 추가하기에는 너무 복잡해질수있다.
그래서 webpack에서 제공하는 설정파일을 만들어 사용하는것을 추천한다.
webpack.config.js
웹팩 주요속성 4가지
-
entry - 진입점이 되는 자바스크립트 파일의 경로
-
output - 컴파일 햇을때 파일의 경로와 이름
파일이름을 컴파일 할때마다 새롭게 줄수도있다.
기존데이터 캐시로 인해 생기는 오류를 줄일 수 있다.Filename: [name][chunk].js -
loader - 자바스크립트 파일이 아닌 웹자원들을 변환할수있도록 도와주는 속성
module이라는 이름으로 webpack.config.js에 선언되어있다.
선언하는 순서 중요! -
plugin
-
mode - production (배포용), development, none
loader 순서와 종류
Style-loader - css빌드된 코드를 style에 넣어주는 로더
css-loader - css 빌드를 하게해준다.
Use 끝에서 부터 실행이된다
sass-loader는 가장 마지막에 써줘야한다
use: ['style-loader', 'css-loader', 'sass-loader']dev-server
속성을 변경 할 때마다 build를 해줘서 결과를 확인해야하는데
dev-server는 속성변경시 바로바로 확인할수있게 해주는 개발프리뷰서버이다.
