React - Webpack

 

 

이번 포스팅에서는 Webpack에 대해 간략히 알아보고자 한다.

 

Webpack에 대해 들어가기에 앞서 JavaScript의 역사에 대해 조금 짚고 넘어갈 필요가 있다. JavaScipt는 2015년 ES6 문법이 등장하기 이전과 이후로 나뉘어진다. 2015년 이전에는 module 개념이 존재하지 않았었고 ES6 문법이 등장하면서부터 module 개념이 도입되기 시작했다. 그 이전에는 JavaScript에 module 개념이 없었기 때문에 module 형식으로 코드를 작성하고 사용하기 위해 webpack이라는 개념이 등장하게 되었다. 

 

module이라는 것은 쉽게 말해 파일을 나눠서 작성하는 것이다. A 파일에서 작성한 내용을 B 파일에서 사용하고 싶을 때 A 파일의 내용을 가져와서 사용하는 것이 바로 module을 사용해서 코드를 작성하는 방식인 것이다. Webpack을 사용하게 되면 여러 JavaScript 파일들을 묶어서 하나의 bundle 파일로 만들 수 있다. 여러 js 파일에서 작성된 내용들을 서로 꼬이지 않게끔 정돈하여 하나의 js 파일로 뭉쳐주는 것이 바로 webpack의 역할인 것이다. 그렇기 때문에 webpack을 모듈 번들러(Module Bundler)라고 부르기도 한다. 다시말해, webpack은 여러개의 JavaScript 모듈을 하나의 파일로 묶어내는 번들러이다.

 

 

👉 Webpack 어떻게 돌아가나?? 

Webpack은 기본적으로 Nodejs 환경에서 돌아간다. Nodejs 환경에서 "npm install" 을 통해 라이브러리를 설치한 후 module을 불러와서 사용해 본 경험이 있을 것이다. 하지만 이렇게 Nodejs 환경에서 module을 사용해 작성된 코드는 브라우저 환경에서는 돌아가지 않는다. ( 최근에는 module을 지원해주는 브라우저들이 많아져 불가능한 것은 아니다. )

 

Webpack은 Nodejs 환경에서 npm을 사용해 module을 연결시켜 작성한 코드들을 브라우저에서 돌아갈 수 있는 코드로 만들어준다. 브라우저에서 실행할 파일을 Nodejs에서 작성한 코드와 함께 사용할 수 있게 되는 것이다. Webpack을 사용하면 Nodejs에서 작성한 코드를 bundle 파일로 가져와서 사용 가능할 뿐만 아니라 css 파일을 bundling 할 수도 있고 webpack.config.js 파일을 통해 babel을 세팅하거나 Cross Browsing 같은 것들 역시 자연스럽게 처리가 가능해진다. 

 

브라우저는 모듈화를 하지 못하지만 webpack을 사용하게 되면 브라우저에서도 돌아갈 수 있는 코드로 bundle 파일을 만들어주기 때문에 개발하는 입장에서는 구현에만 집중해서 코드를 작성할 수 있다는 이점이 있다. 이제 실제로 webpack을 사용해 보도록 하자.

npm install -D webpack webpack-cli

VSCode 터미널에서 위와 같이 npm install을 통해 webpack을 설치해준 뒤 아래와 같은 명령어를 입력해보자.

npx webpack-cli ./src/index3.js

 

index3.js

위와 같이 index3.js 파일 안에 moment 모듈을 불러와서 작성된 코드가 있다고 했을 때 webpack은 index3.js 파일의 내용과 moment 모듈에 있는 내용을 합쳐서 하나의 js파일을 만들어주게 된다. npx webpack-cli ./src/index3.js 명령어에 의해 dist 디렉토리 안에 bundle 파일을 생성해주는 것이다. 이 때 bundle 파일이 생성되는 디폴트 디렉토리명은 dist 이다. webpack에서는 이러한 세팅값들을 webpack.config.js 파일을 통해 변경하는 것 역시 가능하다. 

 

 

👉 webpack.config.js 파일 

webpack.config.js 파일을 통해 webpack 환경설정을 할 수 있다. webpack.config.js 파일을 생성해서 어떤 방식으로 bundling 할 지 설정할 수 있다. webpack.config.js 파일 안에 세팅값들을 적어놓으면 webpack에서 해당 세팅값에 알맞게 bundle 파일을 제작해주는 것이다. 

 

아래와 같이 webpack.config.js 파일 안에 entry 값을 지정해주면 entry 속성에 명시된 파일을 기준으로 의존성 트리를 만들어 하나의 bundle 파일을 만들어 내게 된다. 참고로 entry 설정의 기본값은 ./src/index.js 이다.

webpack.config.js

entry 속성을 지정해주었기 때문에 이제 터미널에 "npx webpack" 명령어를 입력하게 되면 같은 디렉토리 안에 있는 webpack.config.js 파일을 읽어서 해당 내용에 맞게끔 bundle 파일을 제작해준다.