📌 번들링
번들은 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음을 뜻한다.
번들링(빌드)는 여러 제품이나 코드, 프로그램을 묶어서 패키지로 제공하는 행위다.
사용자가 브라우저를 열고 주소를 입력하면, 해당 주소에서 프론트엔드 개발자가 번들링한 여러 파일을 받는다.
이 파일을 브라우저가 실행하여 사용자에게 웹 애플리케이션을 제공하게 된다.
웹 애플리케이션(또는 소프트웨어)를 사용자에게 배포할 때에는 HTML, CSS, JavaScript 파일을 그대로 전송하지 않고, 번들링 작업이 필요하다.
=>용량을 줄이고 파일을 통일하는 툴링 작업
📌 Webpack
현재 가장 인기있는 자바스크립트 번들러
loader를 통해 JS뿐만 아니라 다양한 파일을 번들링한다.
모듈 번들러
여러 파일을 하나의 파일로 합쳐주는 번들러를 의미한다.
대규모의 의존성 트리를 가지고 있는 대형 웹 앱이 등장하면서 모듈 단위의 파일을 호출하여 브라우저에 띄우는 과정이 복잡해지기 시작했다.
이러한 복잡성에 대응하기 위해 하나의 시작점(react app의 index.js등)으로부터 의존성을 가지는 모듈을 모두 추적하여 하나의 결과물을 만들어내는 모듈 번들러가 등장하게 됐다.
빌드와 번들링
빌드: 개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업
react에서 $ npm run build를 실행하면 react build 작업이 진행되고, index.html 파일에 압축되어 배포에 최적화된 상태를 제공한다.
번들링: 파일을 묶는 작업 그 자체. 모듈 간의 의존성 관계를 파악해 그룹화 하는 작업
Webpack의 필요성
웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해서다.
로딩 속도는 유저의 이탈률과 관계가 밀접하다. =>로딩 속도를 개선하기 위한 많은 노력이 필요하다. (ex 번들링)
Webpack loader를 사용하면 JS ES6문법을 ES5로 변환해주는 babel-loader를 사용할 수 있다.
development 모드와 production 모드로 나뉘어있어서 상용화된 프로그램에 코드 난독화, 압축, 최적화 작업을 진행할 수 있다.
📌 Webpack의 핵심 개념
target
컴파일할 target을 지정한다.
module.exports = { target: ["web", "es5"], };
entry
entry point를 지정한다. 기본값 "./src/index.js"
output
생성된 번들을 내보낼 위치와 이름을 지정한다.
const path = require('path'); //path 속성을 사용하기 위한 모듈 module.exports = { ... output: { path: path.resolve(__dirname, "docs"), // 절대 경로 filename: "app.bundle.js", clean: true }, };
loader
JS와 JSON 파일이 아닌 다른 유형의 파일을 처리한다.
module.rules아래에 정의해야 한다.
test와use속성은 필수 속성이다.module.exports = { ... module: { rules: [ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"], exclude: /node_modules/, }, ], }, };
plugins
번들을 최적화하거나 에셋을 관리하고, 또는 환경변수 주입 등의 광범위한 작업을 수행하기 위해 사용한다.
require()을 통해 플러그인을 먼저 요청하고, plugins 배열에 사용하고자 하는 플러그인을 추가한다.
new연산자를 사용해 호출하여 플러그인의 인스턴스를 만들어줘야 한다.
optimization
선택한 항목에 따라 최적화를 실행한다.
💡Webpack 주요 개념 정리
entry 경로 파일에서 필요한 모든 것을
bundler인 webpack을 통해
output 경로의 번들 파일 하나로 모아준다.
loader를 통해 Javascript, JSON이 아닌 파일을 불러온다. (css 등)
plugins는 번들링 과정 중에 개발자가 원하는 다양한 작업을 할 수 있도록 도와준다. (각자 기능이 천차만별)
그 중 html-webpack-plugin은 번들링 과정 중 html 파일을 자신이 원하는 형태로 가공하여 번들에 포함할 수 있게 돕는다.
