Webpack(웹팩)

웹팩에 대해 알기 전 🤷🏻‍♀️

✏️ 웹 애플리케이션을 개발하는 과정에서 코드의 길이가 늘어나게 되었기 때문에 편리하고 유지보수가 쉽도록 하기 위해 많은 모듈을 사용하여 개발할 것이다. 그렇게 완성이 되면 웹 서버에 배포를 하게 된다. 사용자들이 브라우저를 통해 웹 사이트에 접속하게 되면 브라우저는 UI를 나타내기 위하여 HTML, CSS, Image, Font 등의 자원을 웹 서버에 요청(HTTP request)하게 된다. 그리고 웹 서버는 준비된 자원들을 브라우저에게 응답(HTTP response)함으로써 사용자들에게 UI를 볼 수 있게 해 주게 되는 것이다. 하지만 모듈을 계속해서 분리하다 보면 그만큼 브라우저가 서버에게 요청하는 파일의 개수가 많아질 것이다. 요청하는 파일의 개수가 많아진다는 것은 네트워크 코스트가 증가하고 이는 페이지 로딩 시간이 길어진다는 것을 의미한다.

그렇다면 모듈화 프로그래밍이 효율성이 좋다고 볼 수 있는가?

→ 개발 편의성을 위해서 모듈화 프로그래밍을 하였지만 소프트웨어 규모가 커질수록 브라우저는 수백 개, 수천 개의 자원들을 받아야 하며 네트워크 부하가 심각해질 것이다. 그래서 이러한 문제점을 해결하기 위해서 개발 편의를 위해 모듈로 분리 개발하면서 페이지 로딩 시간을 줄이는 방법인 번들링(Bundling)이 등장하였다.

 

모듈이란❓

✏️ 자바스크립트로 개발하면서 코드의 재사용, 유지보수 측면에서 파일을 여러 개로 분리하여 개발하는데 이렇게 분리된 파일들을 모듈이라고 한다. 토이 프로젝트를 진행하면서 자주 사용되는 코드를 컴포넌트 화하여 import 하면서 사용했던 것들 이러한 것을 모듈이라고 생각하면 쉽다.

 

번들링❓

webpack 공식사이트 사진 참조

✏️ 위의 사진을 보고 눈치가 빠른 사람은 벌써 눈치를 챘을 것이다. 이렇게 수 많은 자원들을 하나의 파일로 병합 및 묶는 작업을 번들링(Bundling)이라고 한다.

 

번들러(Bundler)의 종류는 다양하다 ❗️

✏️ 대표적으로 RequireJS, Parcel, Rollup, Browserify, Webpack이 있다.

* 여러 개의 파일을 하나로 묶어주는 도구를 모듈 번들러라고 한다.

 

웹팩(Webpack)❓

✏️ 앞서 언급하였듯이 웹팩은 번들러의 종류 중 하나로 프론트엔드 개발자에서 가장 인기가 있는 번들러이다.

📌 웹팩을 통해 어떤 효과를 얻을 수 있을까?

1️⃣ 웹팩을 통해서 HTML, CSS, Javascript 등의 파일을 묶어서 요청 및 응답하기 때문에 네트워크 코스트(cost)가 줄어들게 된다. 

2️⃣ 리팩토링(refactoring) 효과!! 전체적인 모습은 그대로 유지하면서, 구형 브라우저에서도 사용할 수 있다.

 

웹팩의 4가지 구성요소 🏗  

1. Entry

✏️ Entry의 사전적인 의미는 입구이다. 프로그래밍적으로는 최상위 파일! 즉 시작되는 파일이라고 생각하면 쉽다. 흔히 리엑트를 사용할 때에는 App.js 또는 index.js가 Entry가 되는 것이다.

module.export = {
	entry: './public/index.js'
}

 

2. Output

✏️ Output은 번들링에 대한 결과물을 생성해서 담아두고 있는 곳이다.

module.exports = {
	entry : './source/index.js'
    	output: {
    		path: './public',
            	filename: 'index_bundle.js'
    }
}

 

3. Loader

✏️ 웹팩은 기본적으로 자바스크립트와 JSON 파일만 이해할 수 있는데 로더를 사용하게 되면 다른 유형의 파일을 처리하고 사용할 수 있는 모듈로 변환이 가능하게 도와준다.

module.exports = {
	entry : './source/index.js'
    	output: {
    		path: './public',
            	filename: 'index_bundle.js'
    }
    module: {
    	rules: [
        	{
            	test: \/.txt$/,
                use: 'raw-loader'
            }
        ]
    }
}

 

4. Plugin

✏️ 번들링 결과를 적용하는 속성이다. 번들된 CSS, 자바스크립트 파일들을 HTML 파일에 주입하는 역할이라고 생각하면 쉬울 것이다.

const HtmlWebpackPlugin = require('html-webpack-plugin') // npm을 통해 설치 필요

module.exports = {
	entry : './source/index.js'
    	output: {
    		path: './public',
            	filename: 'index_bundle.js'
    },
    module: {
    	rules: [
        	{
            	test: \/.txt$/,
                use: 'raw-loader'
            }
        ]
    },
    plugins: [
    	new HtmlWebpackPlugin({template: './src/index.html'}),
    ]
}

 

웹팩 간단한 실습 💻  

웹팩 적용하기 전 🫥

index.html

✏️ 웹팩을 적용한 브라우저와 비교하기 위해서 먼저 웹팩을 적용하지 않은 다음과 같은 코드를  index.html 파일에 작성하였다.

 

결과 화면

✏️ 결과 화면은 다음과 같다.

 

Netwok 탭

✏️ 네트워크 탭을 보면 브라우저가 index.html에서 사용한 모든 파일들(hello.js, world.js)을 응답(response)받은 사실을 알 수 있다.

 

이제 웹팩을 적용해보자 😀

1️⃣ 우선 다음 명령어를 통하여 웹팩 설치

npm init

npm install -D webpack webpac-cli

• -D는 개발을 하기 위한 옵션이다.

 

2️⃣ 1번의 명령어을 통해 package.json 파일에 devDependencies가 추가가 된 것을 볼 수 있다.

package.json

 

3️⃣  기존에 index.html에 작성하였던 자바스크립트 코드를 자바스크립트 파일(index.js)을 생성하여 옮긴다.

index.js

 

4️⃣ 자바스크립트 코드를 index.js에 전부 옮겼다. 따라서 애플리케이션의 입구(Entry)는 index.js인 셈이다.

 

5️⃣ hello.js, world.js 파일을 index.js에서 번들링 해보자!

 

6️⃣ 다음 명령어를 실행해준다.

npx webpack --entry ./source/index.js --output ./public/index_bundle.js

✏️ 다음 명령어는 입구에 해당하는 파일은 source 디렉토리에 있는 index.js 파일이고 그것을 public 디렉토리에 있는 index_bundle.js 이름으로 된 파일에 출력하라는 의미이다. 즉 index.js 파일과 파일에서 사용된 모든 파일들을 index_bundle.js에 가져다 놓겠다는 의미이다.

• 2022년 npm 8.3.0 기준으로 6번의 명령어에서 output 옵션을 읽지 못한다. 따라서 밑의 명령어를 통해 에러를 해결하였다.

npx webpack --entry ./source/index.js --output-path ./public/ --output-filename index_bundle.js

 

7️⃣ index_bundle.js 파일에 코드가 생성되었다.

index_bundle.js

 

8️⃣ 이제 index.html에 index_bundle.js 파일을 연결시키고 결과를 보자.

 

9️⃣ 결과화면

webpack 적용 후 결과 화면

✏️ 결과 화면은 당연히 웹팩을 적용하기 전과 동일하다. 하지만 네트워크 탭을 유심히 살펴보자. 처음에는 브라우저가 hello.js, world.js 2개의 파일을 다운받았다. 웹팩을 적용한 후 브라우저는 index_bundle.js 파일 하나만 다운받아서 화면에 나타내준다.

별 차이 없을 거 같은데? 라는 생각을 했다면 대형 프로젝트 규모를 상상해보자. 아마도 수백 개, 수천 개의 파일들을 브라우저는 다운받아야 할 것이다. 그렇다면 당연히 페이지 로딩 시간은 길어질 것이고 사용자들은 3초 이상 반응이 없는 웹 사이트를 기다리지 않는다!!!

웹팩을 사용함으로써 index_bundle.js 하나의 파일만으로 모든 기능들을 사용할 수 있는 것이다. 그렇기 때문에 서버와 접속하는 경우 한번만의 커넥션이 성능 향상으로 이어지는 것이다.

 

번외 🐭

1️⃣ Loader vs Plugin

✏️ 로더는 파일을 해석하고 변환하는 역할이라면 플러그인은 결과물의 형태를 바꿔주는 역할이다.

 

2️⃣ Mode

• development : 개발용
• production : 배포용
• none : 말 그대로 none