[2019.04.21] WebPack 사용법 #1 - webpack 설치

 

# webPack이 왜 필요한가?

우선 webPack이란것을 왜 사용하는지부터 정리해보면, https://helloinyong.tistory.com/75 (이전에 작성한 내용) 에 나와 있는 것 처럼 여러 파일을 한꺼번에 묶어서 하나의 .js파일로 사용하기 위한 것도 있다.

무엇보다 파일 간 dependency를 위해서 modern script에서는 import, export, require을 사용하는데, 브라우저가 이를 호환하지 않는다.

그래서 modern script 방식의 dependency를 브라우저에서 사용할 수 있도록 브라우저 방식에 맞게 하나의 js파일로 bunddling(묶음)하여 script src로 선언하는 것!

 

# webPack 설치법

 

npm install -g webpack webpack-cli // 글로벌 설치 시

npm install -D webpack webpack-cli // 로컬 설치 시 (-D 대신 --save-dev 사용가능)

현재 웹팩4까지 나왔다.

기존 웹팩3까지는 'webpack'만 설치하면 됐었는데, 웹팩4부터는 webpack 뿐 아니라 webpack-cli도 설치해 주어야 사용이 가능하다.

 

package.json 기본 세팅

npm init -y

package.json이라는 파일이 새로 생길 것이다.

 

webpack을 사용하기 위한 설정 - pakage.json

"script": {
  "build": "webpack"
}
// pakage.json 파일

로컬 설치일 시에만 위 처럼 pakage.json에 추가를 해 주어야 한다.

글로벌 설치를 하지 않으면, npm이 webpack 경로를 찾지 못하여 webpack 명령어를 사용할 수 없다. 그러나 위 처럼 pakage.json에 추가를 해 주면, npm이 프로젝트 내 modules 디렉토리의 webpack을 알아서 찾아 실행시켜준다.

 

# webpack 사용해보기

 

index.html

 

웹팩을 사용해 볼 디렉토리로 이동해서 위와 같이 html파일을 하나 만들어서 app.js파일을 사용할 수 있게 선언해본다

 

modelue1.js

 

module2.js

module1.js과 module2.js에서는 'name' 이라는 속성에 문자열을 넣고 export하여 내보낸다.

 

app.js

app.js에서는 module1.js 와 module2.js에서 내보냈던 값을 받아서 console.log를 찍는다. 기존대로라면 console.log 값에 각각 문자열이 찍혀야 한다. 위 사진의 터미널에 보이듯이 node환경에서 실행 시키면 아무 에러 없이 콘솔이 잘 찍히는 것을 확인할 수 있다.

 

그러면 이번에 app.js를 선언하여 사용할 수 있었던 index.html 파일을 이용하여 브라우저에서 확인해보자.

 

index.html 브라우저 화면

 

node환경에는 콘솔이 잘 찍혔지만, 브라우저에서는 에러메세지가 나오게 되었다. 에러메세지에서 commonJS를 이용하기 위한 'require'을 호환하지 않는 것이다.

브라우저에서 호환되지 않는 commonJS의 dependency 정의를, 브라우저에 사용할 수 있도록 웹팩을 이용하여 dependency된 파일들을 bundling하여 하나의 .js파일로 만들어 줘야한다.

 

그럼 이제 웹팩으로 bundle화 시켜보자.

webpack 명령어 사용

dependency 정의된 파일중 제일 최상위 파일인 app.js로 bundle 작업을 한다. 

webpack app.js

위와 같이 명령어를 치면 해당 디렉토리에 dist라는 폴더와, 안에 main.js라는 파일이 생긴다.

이 main.js 파일이 app.js와 module1.js, module2.js 파일이 bundling 되어 나온 하나의 js파일이 된 것이다.

그럼 이제 index.html에서 아까 선언한 app.js 대신 bundle파일인 main.js파일을 선언하고 브라우저를 다시 확인해보자.

 

3개의 js파일이 하던 일을, 하나의 js파일로 묶여서 작업이 되는 것을 확인할 수 있다.

 

웹팩의 더 자세한 사용법은 다음 글에 또 볼로깅을 해야겠다...