webpack 1부: 설치

苦盡甘來 - 고진감래

설정을 끝내니 이런 천국이 없는데, 설정하는 과정은 꽤나 괴로웠다.

오늘의 주인공 webpack 되시겠다.

얘는 "js 번들링 툴"이다.

예를들어 우리가 프론트엔드에 좀 더 집중한 게시판을 만들고 있다고 가정해보자.

list / view / write / modify / delete 등의 페이지가 있을것이고,

각각 list.js / view.js / write.js / modify.js / delete.js 의 파일들이 우리가 쓰고싶은 Vue.js, axios, jQuery, jqueryui 등과 함께 

각 페이지 하단에 <script> 태그로 나열 될 것이다.

거기에 추가로 공통적으로 사용 할 기능들을 모아놓은 common.js 도 넣어 줘야 하겠지.

webpack은 이것들은 js 파일 한개, 또는 common.js를 따로 분리하여 두개 정도로 묶어준다.

물론 그 안에 jquery, vue, axios, jqueryui 등도 내장되어 있는 상태로 말이다.

 게다가 명령어 한줄이면 알아서 줄줄 묶어준다.

심지어 각 vendor에 포함되어 있는 css까지 묶어서 하나로 만들어 준다.

설치부터 해보자.

이걸 묶어서 쓰려면 npm으로 js들을 설치해서 쓰는것이 편리하다. (따로따로 할거라면 이걸 왜?)

원래 보통 react나 nodejs에 쓰이는 툴이니 말이다.

먼저 npm은 필수로 설치되어 있어야 한다.

$ sudo apt-get install npm -y

다음으로 webpack 명령을 콘솔에서 날리기 위해 글로벌 설치를 해준다.

$ npm i -g webpack

이제 프로젝트 디렉토리의 public directory (ci나 laravel 등의 일반적인 프레임워크의 DOCUMENT ROOT가 되는 곳)로 이동한다.

npm을 쓸것이니 초기화부터 날려준다.

public$ npm init

초기화 과정에서 몇가지 물어볼텐데, 알아서 잘 대답 해 준다. 그정도는 할 수 있잖아?

초기화가 완료되면 webpack을 비롯하여 사용할 js 모듈들을 설치 해 준다.

public$ npm i -S webpack jquery jqueryui bootstrap vue axios

public 디렉토리 내에 package.json, webpack.config.js 파일과 node_modules/ 디렉토리가 생성되어 있을 것이다.

(webpack.config.js는 확실치 않으니 없으면 만들면 된다.)

이것으로 설치는 끝이다.

쉽지?

아직은 그래 보일거다. 하...