[webpack 미니 발표 2부] Webpack의 필요성과 주요 개념

1부 요약

- 웹팩은 모듈 번들러이다.

- 모듈 번들러는?? 

 웹 어플리케이션을 이루는 수많은 자원들이 있는데, 이것들을 조합하고 압축해서 하나의 결과물로 만들어준다.

 

Webpack의 필요성

1. 웹 사이트가 빠르게 로딩되게 해준다.

여러 파일을 압축, 조합 -> 서버에 요청해야 하는 파일 개수 감소 -> 사이트가 빨리 로딩됨.

1부에서 썼다 :) 

또한 처음에 모든 자원을 요청하는 게 아니라, 필요해질 때 자원을 요청하는 Lazy loading도 지원해서 초기 페이지 로딩 속도를 높인다.

2. Dependency graphy를 생성해서 빌드하여 변수의 scope(유효 범위) 문제를 해결한다.

javascript의 변수는 기본적으로 전역 범위를 가진다. 그런데 여러 js 파일을 조합해서, 큰 웹 어플리케이션을 만들 때 문제가 생길 수 있다. 1번 js 파일에서도 var a가 있고, 2번 js 파일에서도 var a가 있다면..? 크고 복잡한 어플리케이션을 개발할 때, 변수 이름을 일일이 기억하지 못해서 중복으로 선언해서 의도하지 않은 결과가 나올 수도 있다.

다행히 스크립트 파일을 IIFE(Immediately invoked function expressions/ 즉시 실행 함수 표현)로 감싸서 스코프에 대한 걱정 없이, 파일을 안전하게 합치고 번들링할 수 있다 !!

그런데 웹팩 없이 모든 프로젝트 파일을 하나로 연결한다면?? IIFE 덕분에 변수의 스코프 문제는 해결되었겠지만..  만약에 어떤 라이브러리를 쓰는데, 그 중 하나의 함수만 쓴다고 해도 전체 라이브러리 코드를 다 가져와서 묶어야 한다. 웹팩은 파일들의 의존성을 분석해서 의존성 그래프(dependency graph)를 생성해서 빌드해서 이 문제를 해결한다.

3. 웹 개발 작업을 자동화해준다.

개발한 것을 브라우저에서 보기 전에 html, css, js 압축/ 이미지 압축/ scss-> css를 바꿔주기 등등 작업을 해줘야 했다. 이런 걸 개발자가 일일이 하지 않고, 웹팩이 해준다.

 

Webpack 기본 개념 

웹팩을 사용하려면 웹팩 관련 라이브러리를 설치하고,

npm i webpack webpack-cli webpack-dev-server -D

프로젝트 맨 상단에 webpack.config.js 파일을 만들어야 한다. 이 파일에 들어갈 속성들을 간단히 설명하겠다. 

 

module.exports = {
  entry: './path/to/my/entry/file.js',
   output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
   module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
   plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
    mode: 'production',
};

(코드 출처: webpack 공식 홈페이지)

- entry

웹팩에서 자원들의 의존 그래프를 만들기 위해서, 최초로 진입하는 지점이다. 자바스크립트의 파일을 지정하면 되는데, 그 파일에는 웹 어플리케이션의 전반적인 내용이 담겨있어야 한다. 웹팩이 그 파일부터 시작해서, 그 파일과 직간접적으로 의존하는 파일들을 모두 해석해서 빌드한다.

SPA(single page application)에서는 엔트리가 하나겠지만, 멀티 페이지 어플리케이션이면 엔트리를 여러 개 정할 수도 있다.

- output

웹팩이 모듈 번들링을 끝낸 후에 결과물을 저장하는 위치와 파일 이름을 정할 수 있다. 이름을 딱 정해줄 수도 있고, 다른 것(고유 해시/1-> 2-> ... 순서대로 등등)을 붙일 수도 있다.

- loader

기본적으로 웹팩은 자바스크립트, json만을 이해한다. 그외 자원은 어떻게 해석해야 할지 따로 설정을 해줘야 한다. html, css, 이미지, 폰트 등등. 다른 웹 자원들을 어떻게 해석해서 모듈화하고, 의존 그래프를 만들지 알려주는 속성이다.

test: /\.scss$/,
use: ['css-loader', 'sass-loader']

(코드 출처: https://joshua1988.github.io/webpack-guide/concepts/loader.html#css-loader-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0)

test: 어떤 파일들에

use: 어떤 loader를 적용해라~ 

test는 일반적으로 정규 표현식을 사용하는데, 예시 코드에서는 끝 부분이 scss로 끝나는 파일들에 대해서 ~ 라는 뜻이다.

use는 그 파일들에 어떤 로더를 적용할지를 정한다. 여러 개 로더를 적용할 수도 있다. 오른쪽-> 왼쪽으로 적용된다고 한다. 예시 코드에서는scss 파일을  sass 로더를 적용해서 css 파일로 변환한 후에, 웹팩에서 css 파일을 인식하게 css 로더를 적용한다는 뜻이다.

- plugin

플러그인!! vs code 플러그인은 vs code에 추가적인 기능을 제공해주는 건데, 그것처럼 웹팩에 추가 기능을 제공하는 것이다. 예를 들어서, 웹팩의 빌드 진행률을 표시한다든지, css 파일을 별도로 분리해준다든지 등등

예시에 나온 HtmlWebpackPlugin은  번들링한 결과물을 자동으로 삽입해서 HTML 파일을 생성해주는 플러그인이다. 

 

그런데...

발표를 위해서 webpack을 공부하면서, '우리 회사에서는 어떻게 하고 있나 볼까?'하면서 webpack.config.js 파일을 찾았지만 없었다.. 우리 회사는 요즘 vite를 사용하고 있던 것이다..

vite란 뭐고, webpack과 뭐가 다른지 궁금해졌다. 

다음 편은 vite이다 !

 

참고 사이트 😍😍

https://webpack.js.org/concepts/

Concepts | webpack

https://joshua1988.github.io/webpack-guide/motivation/problem-to-solve.html#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EB%B3%84-http-%EC%9A%94%EC%B2%AD-%EC%88%AB%EC%9E%90%EC%9D%98-%EC%A0%9C%EC%95%BD

웹팩으로 해결하려는 문제 | 웹팩 핸드북