웹팩 :: webpack

webpack 이란

webpack은 무엇일까?
서로 연관관계가 있는 웹 자원들을 js, css, img 같은 정적인 자원으로 변환해주는 모듈 번들러. 웹페이지에서 잘 돌아가도록 최적화 시켜주고 성능을 올려줌. 번들링이란 C언어가 컴파일 하는것과 비슷하게 필요한 부분들을 묶어주는 역활을 하는것이라 볼 수 있다.
즉 파일을 분류하고 정리하고 실행하는 기준을 만들어주는것이 webpack 이다.

 

webpack없이 글로벌 환경으로 개발시 문제점.

1. html에서 글로벌 환경으로 <script>를 로딩 (asp, jsp 같은 서버사이드 랜더링 방식)하는 서버사이드 랜더링의 문제점을 해결.

예) jquery $변수는 다른 라이브러리에도 사용됨으로 충돌가능

1. 로딩순서에 의존성.

예) jquery를 먼저로딩하고 jquery-ui를 로딩해야함.

1. html에 css, javascript, 등 (많으면 10개도 넘는 링크들)

 

 

설치과정

• (sudo) npm install webpack

sudo는 어드민 권한을 위해 붙여준다.

• pwd

(현재 디렉토리의 위치를 확인한다)

• npm init 또는 npm init -y

• npm install --save-dev webpack webpack-cli webpack-dev-server

• 해당 폴더안에 node_modules가 생성되고

• package.json에 devDependencies

• 3가지 항목들이 추가됨

• webpack : 모듈화를 위한 필수 패키지.

• webpack-cli : 커맨드라인툴에서 사용하기위한 툴.

• webpack-dev-server : 사용할 임시서버를 만듦.

• 여기서 --save-dev (혹은 -D)는 개발의존성을 기록하라는 의미

• 설치가 안될경우 sudo를 이용해 관리자 권한으로 설치

• webpack src/index.js --output dist/bundle.js --mode development

• npx webpack: 을 실행. (npx는 webpack을 실행해주는 언어다)

• dist/main.js 생성됨

• index.html에 스크립트 링크를 "./main.js"로 수정후 실행.

 

환경설정 : 번들링을 하기위한 세팅단계.

1. 해당폴더에 webpack.config.js(웹팩 설정파일)를 추가하고

• module을 export하는 스크립트작성.

• 번들링하고자 하는 entry 설정

• output 폴더 설정

• plugins 설치 등을 할 수 있음.

2. npx webpack --config webpack.config.js 하거나,

3. package.json의

1. "script" 안에 "build" : --- 형태로 넣고.

예) "build": "webpack --config webpack.config.js"

1. npm run build로 실행해준다.

 

 

키포인트!.

• entry point라는 진입점.(src/index.js)

• 리액트의 App.js처럼 모든

• 번들링된 결과를 포함하는 output 폴더 (dist/main.js)

 

 

다음시간에는 
CSS loader / SASS / CSS로딩 / POST-CSS 설정에 대해 추가로 알아보자.