웹팩이 필요한 이유와 간단한 예제

모듈

 

내가 이미 리액트나 노드를 공부하면서 수도 없이 쓰고 있던 것이 있다. 바로 모듈이라는 것인데 완전 간단히 말하면 '코드 덩어리 ' 라고 표현 할 수 있겠다. 그 양이 간단할 수도 엄청 복잡하고 클 수도 있겠다. 

 

이 자바스크립트를 브라우저에서만 사용하는 것이 아니라 범용적으로 즉 서버사이드 쪽에서도 사용하게 하기 위해 많은 노력이 있었지만 가장 대표적인 것이 CommonJs 라는 것이다. 

 

이 자바스크립트 언어를 브라우저용 언어에서 벗어나려면 여러 문제들이 있었는데 

 

1서로 호환되는 표준 라이브러리가 없다. 

2 데이터베이스에 연결할 수 있는 표준 인터페이스가 없다. 

3 다른 모듈을 삽입하는 표준 방법이 없다.

4 코드를 패키징해서 배포하고 설치하는 방법이 없다.

5 의존성 문제까지 해결하는 공통 패키지 모듈 저장소가 없다. 

 

이러한 문제들은 모듈화로 해결된다.

 

모듈은 자신만의 독립적인 실행 영역이 있어야 하고 전역변수와 지역변수를 분리하는 것이 매우 중요하다. 서버사이드 자바스크립트의 경우 파일마다 독립적인 파일 스코프가 있기 때문에 파일 하나에 모듈 하나를 작성하면 간단히 해결된다. 

 

이러한 모듈 시스템에는 AMD (Asynchronous Module Definition : 비동기적 모듈 선언), UMD (Universal Module Definition : 통합 모듈 선언 , Commonjs, AMD 합친듯한) 등이 있는데 그럼 웹팩은 왜 나왔을까.

 

아쉽게도 모든 브라우저에서 모듈 시스템을 지원하지는 않는다. (ex. IE...) 

그래서 브라우저에 무관하게 모듈을 사용할 수 있게 해주는 것이 웹팩이다. 

 

어떠한 방식으로 그게 이루어지는지 한번 살펴보자.

 

웹팩은 여러개 파일을 하나의 파일로 합쳐주는 번들러다. 하나의 시작점(entry point) 로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물을 만들어 낸다. 

 

A 파일에서 B 파일을 찾고 C 파일을 찾아서 하나의 파일을 만들어낸다. 

 

 

이제 간단한 연습을 통해 웹팩을 사용해보자

 

npm install webpack webpack-cli  // 웹팩과 웹팩을 간단한 명령어로 실행시킬 cli

 

우선 폴더를 하나 만들어 준뒤에 모듈로써 쓸 파일 2개를 만들어 준다. 

 

src 폴더를 하나 만든 뒤에 두개의 자바스크립트 파일을 만든 뒤에 하나의 파일에서 다른 파일을 임포트 시켜준다. 즉 의존성을 갖게 만든다. 

 

app.js 파일 모습

요로코롬 해준 뒤에 직접 터미널에 명령어로 웹팩 작업을 시켜줄수 있지만 config 파일을 만들어서 진행해보는 작업도 해보자.

 

이게 명령어의 옵션들을 이용해서 진행 

 

위의 코드를 보면 --mode 를 통해 개발용인지 , 제품용인지 설정해줄 수 있고 --entry 를 통해 메인으로 할 음.. 파일이 임포트 되어 있는 파일을 설정해주고 -o 는 output 즉 웹팩 작업이 마무리 되어 한곳에 모아진 결과물 파일 을 만들 경로를 정해주는 것이다. 

 

이제 config 파일을 만들어서 한번 진행해볼 것인데 우선 webpack.config.js 파일을 하나 만들어 준당. 

 

 

 

이런식으로 매번 긴 명령어를 치는 것 보다 이렇게 한번 미리 설정을 해준다음에

 

 스크립트 실행 명령어에 build 라는 이름으로 설정해둔 뒤에 

 

실행시켜 보면 정상적으로 잘 작동된 것을 볼 수 있다. 

 

끝