[CS] Webpack, bundler

드디어 웹팩과 번들러에 대한 공부를 정리하려고한다.

많이 본 그림일거다. 웹팩이라하면 말그대로 여러가지 js,css,ts,이미지파일 등등 웹만드는 파일들을 한군데 묶어준다(bundling)라는 개념은 대강 알고있었다. 그런데 언제? 왜? 그리고 어떻게 웹팩으로 번들링을 해주는건지는 모른다.

따라서 다시 기초로 돌아가보자. 예제를 위해 간단한 코드와 파일을 생성해보고 이를 테스트해보면서 다시한번 개념을잡자.
기본적으로 내가 만든 구성은 다음과 같다.

기본적인 index.html 을 만들고 이곳에서 쓸 js파일을 5개 만들었다. Import 하고싶은 script에 type을 module을 작성하고 5개의 js파일을 import해주었다.
각각의 js파일에는 string값이 들은 변수, while문을 도는 함수들로 이루어졌다고 생각할때 우리는 이렇게 import를 해서 사용한다.
이게 일반적인 모듈을 import하여 쓰는 방식이다.

모듈이라고하면 기본적인 개념은 함수, 클래스, 인터페이스등 내가 원하는 기능이나 값들이 한군데 모아쓰는걸 모듈 이라고 알고있다.

개발자도구에서 Network를 가보면 각각의 네트워크 연결상태와 타입, 사이즈, 걸리는 시간등의 정보를 볼수있고 내가 쓰고자했던 js파일들과 html파일을 가져오는걸 볼수있다. 그런데 만약에 이러한 js파일이거나, css파일, image파일등이 몇백개~몇천개가 되는 어마어마한 큰 프로젝트가 된다고 했을때, 사용자에게도 서버에게도 이러한 엄청나게 많은 파일들을 일일이 불러오는건 좋지 않은 현상이고 이것을 개선하기위해서 생긴게 바로 Webpack 이라는것이다. 이를 쓰게되면 한번에 한가지 파일만 불러오므로 여러모로 좋다고한다.

-> 아래 번들후 하나의 j파일안에 똑같은 기능을 불러오는 시간을 보면 알수있지만 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 기대할수있다. 일반적으로 특정 웹 사이트를 접근할 때 5초 이내로 웹 사이트가 표시되지 않으면 대부분의 사용자들은 해당 사이트를 벗어나거나 집중력을 잃게 된다고한다. 이 로딩속도를 개선하기위해서 개발자들은 많은 노력을 하는데 그중 브라우저가 서버로 요청하는 파일의 숫자를 줄이는 것이다. 또한 초기 페이지 로딩 속도를 높이기 위해 나중에 필요한 자원들은 나중에 요청하는 레이지 로딩(Lazy Loading)이 등장했다

 

이 Webpack을 설치하기위해선 먼저 원하는 프로젝트를 nodeJs의 패키지프로젝트로 만들어야한다.

npm init

을 통해 package.json 파일을 만들어주고 웹팩을 사용하기위한 패키지 두가지를 설치해준다.

npm install -D webpack webpack-cli

설치를 하고나면 devDependencies에 설치한 패키지 이름과 버전이 들어가있는걸 알수있다. 이때 dev가 붙은건 -D 라는 개발 명령어를 넣었기때문이다. 또한 —save-dev 명령어와 같은 말이다

또한 node_modules이 생기고 그안에 웹팩을 구동하기위한 우리가 설치한 폴더를 확인할수있다.

그리고나서 index.html에서 하나하나 불러와서 썼던 import와 그 script태그를 지우고 index.js를 만들어 모아주었다.

이 index.js는 우리가 만드는 애플리케이션의 입구에 해당하는데 이를 entry파일이라고 하는데 이를 번들링을 통해서 이 index.js 파일안에 있는 import 된 파일들을 번들링을 해보기로했다.

npx webpack --entry ./src/index.js --output ./public/build.js

다음과같은 명령어를 해석해보면 경로 ./src에 있는 index.js 가 entry 파일이라고 알려주고 이를 경로 ./public폴더안에 build.js 이라는 이름에 가져다 모으라는 명령어이다.
위의 명령어가 실행이안된다면 사용하는 webpack의 버전에 따라 명령이 살짝 다르다.

npx webpack --entry ./src/index.js --output-path ./public/build.js

 

이렇게 하게되면 이런식으로 해당 import했던 js파일들과 코드들을 번들링하여
번들js파일로 저장된걸 볼수있고 index.html에 해당 번들 파일을 넣어준다.

네트워크를 통해 불러온 파일명을 봤을때 기존처럼 여러개를 불러오는게 아닌 불러오는 파일이 build.js 하나인걸 볼수있다.
그런데 우리가 webpack으로 번들링하고싶을때 항상 긴 npx 명령어를 입력하기란 번거롭기때문에

touch webpack.config.js

명령어를 써서 webpack.config.js 파일을 만들어준다. (또는 직접 webpack.config.js 를 만들어줘도된다.)
이 webpack.config.js 가 default로 지정된 webpack 옵션관리하는 이름이다.

module.exports={
    mode: "development",
    entry:"./src/index.js",
    output: {
        path: __dirname,
        filename: "build.js"
    }
}

이렇게 입력하면 처음에 npx 명령어로 번들된 js파일을 만든것과 같은 뜻이다. entry를 정해주고 그 entry를 output경로와 이름으로 만들어준다. 이때 __dirname은 config파일이있는 현재 위치를 나타낸다.
이렇게 작성후

npx webpack

이라고만 치면 해당 build.js가 똑같이 만들어진다.

이처럼 webpack을 해줄 옵션들은 webpack 공식사이트에서 자세히볼수있다.
https://webpack.js.org/concepts/

Concepts | webpack

이렇게 '기본적인' 웹팩을 알아보았다.