웹팩(Webpack) 1. 소개 및 설치

웹팩(webpack) 사용법 2017. 12. 15. 16:39

728x90
반응형

소개


웹팩(Webpack) 은 자바스크립트 모듈 번들러(Bundler)로 자바스크립트로 작성된 모듈을 번들링 하여 하나 또는 여러개의 번들로 만들어 주는 도구 입니다.


※ 번들링

- 각 모듈을 묶어(패키징) 해당 번들만으로 구동가능한 상태로 만드는 것


사이트: https://webpack.js.org/


는.. 설명만 듣고는 뭔소린지 잘 모를 수 있습니다.


웹팩 사이트에 아래의 그림이 보일꺼예요.



그림만 보면 좌측의 여러개로 쪼개져 있는 파일을 우측처럼 하나로 묶어주는 기능을 하는거 같아요.


음 그리고 제가 잠깐 사용을 하면서 느낀건데 걸프(Gulp) 또는 그런트(Grunt) 같은 빌드시스템 비슷한 느낌을 받았습미다.

그래서 그런지 걸프나 그런트 같은 빌드시스템을 사용해보신 분들이라면 어렵지 않게 이 웹팩으로 프로젝트 빌드를 할 수 있을듯 합니다.


걸프 사용법


무엇보다 웹팩이 걸프,그런트 보다 더 좋다고 어디선가 들은 기억이 있습니다.


걸프 같은 경우는 제가 다니고 있는 회사에서 어떤 한 프로젝트 에서만 걸프를 사용하고 있습니다.

그래서 내년에 들어가는 프로젝트는 이 웹팩으로 빌드를 하면 어떨까 생각해보게 되네요.

차이점을 체험해 보고 그 차이를 포스팅 해볼께요.



포스트 작성은 윈도우 기준으로 하겠습니다. (맥 사용자 분도 보시면 금방 하실 수 있습니다.)



우선 node js 가 필수로 설치되어 있어야 합니다.

버전은 LTS 버전으로 다운받고 설치를 쭉쭉 진행 하시면 됩니다.

Node jshttps://nodejs.org/ko/








노드 설치가 끝났으면 이제 웹팩으로 관리할 프로젝트 공간을 만들어 줘야 합니다.

저는 D 드라이브에 project_webpack 이란 폴더를 만들었습니다. 







그리고 명령 프롬프트 창을 킵니다. 명령 프롬프트는 다음과 같이 찾거나

아주 간단하게 '윈도우키 + R → cmd 입력후 엔터' 하시면 됩니다.







아무튼 이런 창이 떠야 합니다. 이 창 이름은 '명령 프롬프트' 라고 합니다.

맥은 '터미널(Terminal)' 이라고 하는 창이 있습니다.






project_webpack 폴더가 웹팩으로 관리할 수 있는 상태를 만들어 주기 위해 다음과 같이 입력합니다.

- d:                           현재 프롬프트의 위치를 C드라이브에서 D 드라이브로 변경

- cd project_webpack    프롬프트가 바라보는 디렉토리 위치를 project_webpack 으로 바꿈

- npm init                   project_webpack 폴더가 웹팩으로 관리될 수 있게 만듭니다. (본래의 뜻은 이건 아니지만 제일 쉬운                                           표현 아네요.)







그럼 맨 아래에 머 입력 하라고 뜹니다.

package name 그냥 저는 test 입력했습니다. 







그리고 그냥 엔터를 쭉쭉쭉 쳣습니다.

나머지는 지금은 중요한게 아니라서 이정도로만 진행했습니다. ok? 라고 뜨면 지체없이 또 엔터 눌러 줍니다.







그럼 project_webpack 폴더엔 package.json 이라는 파일이 생성된걸 확인하실 수 있습니다.

npm init 을 하면 이 파일이 생성이 되는거죠. 이 package.json 파일을 통해서 어떤 모듈을 설치 또는 어떤 모듈을 동작 시킬 수 있습니다.







이 package.json 파일을 한번 열어보겠습니다.

아까 위에서 적었던 정보들이 담겨져 있네요. 작성을 하지 않았다면 기본으로 들어가 있는 문자가 있습니다.







웹팩을 설치해 보겠습니다.

웹팩을 설치하는 두가지 방법이 있습니다.

window 전역설치: npm install -g webpack

현재 경로에서만 설치: npm install --save-dev webpack

두 명령의 차이점은 웹팩 명령어를 어디에서건 사용할 수 있거나 없거나 정도로 가볍게 생각하시면 좋습니다.

현재 경로에서만 설치 이 부분은 명령프롬프트에 출력되고있는 바로 그 경로 입니다.

두개중 하나만 하셔도 됩니다. 저렇게 한줄 명령어 치시고 엔터치면 설치가 진행 되는게 보입니다.

맥의 경우엔 홈브류가 안깔려 있으면 앞에 sudo 를 입력해서 웹팩을 설치합니다.







마지막으로 제대로 설치가 되었는지 버전을 확인해 보겠습니다.


반응형