webpack, 웹팩 기초

실무에서 웹팩을 사용하고 있었지만...
자세하게 세팅을 확인하지 않고 사용하고 있었는데
웹팩과 친해지기 위해서 웹팩을 기초 지식들을 정리해 보았다!

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의 장점

1. 라이브러리 관리가 용이
2. 사용 용이
   다른 스크립트 파일처럼 인터넷으로 찾고 코드를 가져오고 하지 않아도 된다.
   명령창에서 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,웹팩이란

프론트엔드 프레임워크에서 가장많이 사용되는 모듈 번들러
여러파일들을 해석해서 하나의파일로 만들어주는 모듈번들링

웹팩의 등장배경

• 파일 단위의 자바스크립트 모듈 관리의 필요성
• 웹개발 작업 자동화도구
• 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

웹팩의 장점

1. request수가 적어진다.
2. js스크립트를 하나로 합치고 한번만 불러온다.
3. 자바스크립트만이 아닌 웹페이지를 구성하는 모든 자원들을 위한 것

웹팩으로 해결하려는 문제

• 자바스트립트 변수 유효범위
• 브라우저별 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는 속성변경시 바로바로 확인할수있게 해주는 개발프리뷰서버이다.