배포 자동화를 구축하기에 앞서, 현재 진행 중인 프로젝트가 CRA에 내장된
webpack.config.js파일을 사용하고 있었기 때문에, 좀 더 나은 웹팩 (ex. 요새 핫한 vite와 같은)으로 바꾸는 게 좋지 않을까? 하는 생각을 하다가, 막연히 "최신 웹팩으로 교체해야 해!" 라는 이유보다는 좀 더 근본적인 원인을 파악해보기 위해 webpack이 하는 일과 필요성에 대해 자세히 알아보기로 했다.
📂 Webpack이란?
- 자바스크립트 어플리케이션을 위한 정적 모듈 번들러를 뜻함
- 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.
- ex) html 에 들어가는 다수의 js 파일들을 하나의 js 파일로 만들어주는 것.
💡 모듈(Module)
관련된 데이터와 함수들이 묶여서 모듈을 형성하며, 주로 파일 단위로 관리된다.
ex) Modal 은 isShow 라는 상태와 show, close 함수를 가진 하나의 모듈이다.
💡 번들러(Bundler)
모듈별로 나누어진 파일을 연관되어 있는 단위로 묶어 하나의 파일로 만들어주는 역할을 한다.
→ 모듈 또는 외부 라이브러리 간의 의존성을 쉽게 관리할 수 있다.
📂 Webpack이 필요한 이유
네트워크 병목현상 방지 목적
- 웹페이지에서 모듈을 사용하려면 해당 모듈과 모듈에서 사용하는 라이브러리를 로드해야 한다.
- 모듈 수가 많아지면 로드 과정이 복잡해지며, 네트워크 병목현상이 발생할 수 있게 된다. → 이 때, 관련 있는 단위끼리 번들링 된 파일을 로드하면 이러한 문제를 해결할 수 있다.
성능 최적화
- 사용하지 않는 코드를 제거하는 tree shaking과 같은 최적화를 수행함으로써 HTTP 요청 수를 감소하여 웹사이트 성능 및 로딩 속도를 빠르게 향상시킨다.
번들러가 제공하는 편의성
- 번들러 실행 시, 번들러가 컴파일 과정에서 필요한 플러그인을 자동으로 추가해준다.
종속성 문제 해결
- 서버와 브라우저 모두에서 최대한 원활하게 작동할 수 있는 코드의 상당 부분을 빌드 시 모든 종속성과 함께 번들하는데 도움을 준다.
📂 Webpack의 핵심 요소 (Entry, Output, Loader, Plugin)
Entry
- 엔트리 포인트는 웹팩이 번들링을 시작할 메인 파일이다.
- 값으로 입력된 파일의 의존성을 찾아 나머지 파일을 알아낸다. (디펜던시 그래프 생성)
- 엔트리 포인트는 꼭 하나가 아니라 여러 엔트리 포인트를 지정할 수 있기 때문에 여러 개의 번들을 생성할 수 있다.
// webpack.config.js
// Single Page Application
module.exports = {
entry: './src/index.js'
}
// Multi Page Application
modul.exports = {
entry: {
login: './src/LoginView.js'
main: './src/MainView.js'
}
}
Output
- 생성된 번들을 내보낼 위치와 파일의 이름을 지정하는 역할을 한다.
- filename : 웹팩으로 빌드한 파일명
- path : 해당 파일의 경로
// webpack.config.js
var path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
path: path.resolve(__dirname, './dist')
}
}→ output: './dist/bundle/js'
Loader
- 웹팩은 자바스크립트와 JSON만 인식 가능하다.
- JSX 같은 코드를 이해하길 원한다면 로더를 사용하여 해당 코드를 웹팩이 이해할 수 있도록 변환할 로더를 옵션으로 설정하고 그것들을 다시 디펜던시 그래프에 추가할 수 있는 유효한 모듈로 변환한다.
- test : 변환이 필요한 파일들을 식별
- use : 변환을 수행하는 데 사용되는 로더를 가리킨다.
- babel-loader를 사용하면 최신 문법으로 작성된 Javascript를 모든 브라우저에서 해석할 수 있도록 변환할 수 있다.
// webpack.config.js
module.exports = {
module: {
rules: [{ test: /\.?js$/, use: 'babel-loader' }],
},
};Plugin
- 웹팩의 기본적인 동작에 추가적인 기능을 제공한다.
- 번들을 최적화하거나 asset을 관리하고 환경 변수 주입 등과 같은 작업을 수행한다.
- 로더는 파일을 해석하고 변환하는 과정에 관여한다면, 플러그인은 해당 결과물의 형태를 바꾸는 역할을 한다고 볼 수 있다.
// webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin(), // 웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인
new webpack.ProgressPlugin() // 웹팩의 빌드 진행율을 표시해주는 플러그인
]
}
개 발자국 🐾