[React] 번들링 & Webpack

Hannahhh·2022년 9월 26일

React

목록 보기

19/30

🔍 번들링

사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음으로, 사용자가 브라우저를 열고 주소를 입력하면 개발자가 번들링한 파일을 받게되며, 파일을 브라우저가 실행하여 웹 애플리케이션을 제공받을 수 있다.

즉, 사용자에게 배포하기 위함으로, 번들링 작업에서 파일의 용량을 줄이고 통일하는 툴링 작업을 수행한다.

번들링 하지 않은 파일을 전송한다면, 아래와 같은 문제가 발생한다.

서로 다른 js파일에서 같은 변수를 사용하고 있을 시, 변수 간 충돌이 일어날 수 있다.
프레임워크 코드는 8MB로, 인터넷 속도가 느린 국가의 모바일 환경에서 사용자가 불편을 느낄 수 있다.
번들 파일의 공백 문제(사이즈를 줄이기위해 없앤다면 가독성이 떨어지므로 결국 공백을 유지)
배포 코드가 읽기 쉬우므로 애플리케이션의 임의 조작이 가능

🔍 Webpack

HTML, CSS, JavaScript 등의 여러 파일을 조합하여 하나의 파일로 합쳐주는 모듈 번들러를 의미하며, 2022년 현재 프론트엔드 애플리케이션을 배포하기 위해 많이 사용하는 번들러이다.

공식 문서

또한, Webpack은 로더(Loader)를 통해 JavaScript외에도 다양한 파일을 번들링한다.

⭐ 모듈 번들러?

변수들의 스코프 문제, 각 자원을 호출할 때 생기는 네트워크의 코스트 문제 등 복잡성에 대응하기 위해 하나의 시작점(React App의 index.js 등)으로부터 의존성을 가지는 모듈을 추적해 하나의 결과물을 만들어낸다. 즉, 모듈 간의 의존성 관계를 파악해 그룹화 하는 작업이다.

👀 Webpack의 필요성

웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해서 필요하다.'

웹 페이지를 구성하는 코드의 양이 많아질 수록 웹 페이지의 로딩 속도와 성능이 저하되므로, 많은 사용자의 이탈을 야기한다.

따라서, Webpack을 사용하면 브라우저에서 서버로 요청하는 파일의 숫자를 줄임으로써 네트워크 코스트 또한 획기적으로 줄일 수 있기 때문에 사용자 이탈을 방지할 수 있다.

즉, Webpack은 개발자 경험(DX)과 사용자 경험(UX) 개선에 모두 기여할 수 있다.

👀 Webpack 핵심 개념

version 4.0.0 이후로는 번들링을 위한 설정 파일을 필요로 하지 않지만, 사용자 요구에 따라 유연하게 설정할 수 있다.

아래는 webpack.config.js파일의 예시이다.

module.exports = {
  target: ["web", "es5"], // 작성된 코드를 ES5 버전으로 컴파일한다고 지정(target의 default 값 = web, Browser Compatibility와 관련)
  // 핵심 개념 - 1. entry
  entry: './path/to/my/entry/file.js', 
  // 핵심 개념 - 2. output
  output: { 
    path: path.resolve(__dirname, 'dist'), // path 모듈 사용하여 지정, 절대경로로 설정해야 함
    filename: 'my-first-webpack.bundle.js',
    clean: true
  },
  module: {
    rules: [
      {
     	test: /\.txt$/, 
      	use: 'raw-loader' 
        exclude: /node_modules/,
      },
    ],
  },
   	plugins: [
    	new HtmlWebpackPlugin({ template: './src/index.html' }),
   		new MiniCssExtractPlugin(),
  ],
  	optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ]
  }
};

✔ Entry(엔트리)

Webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용해야하는 모듈로, entry point가 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낸다.

기본값은 ./src/index.js 이나, 다른 entry point를 지정할 수 있다.

// webpack.config.js
module.exports = {
  entry: './path/to/my/entry/file.js',
};

✔ Output(출력)

생선된 번들을 내보낼 위치와 파일 이름을 지정하는 방법을 webpack에 알려준다.

위치의 경우 기본 출력 파일은 ./dist/main.js로, 생성된 기타 파일은 ./dist 폴더로 설정되나, 다른 path 지정할 수 있다.

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  
  output: {
    path: path.resolve(__dirname, 'dist'), // path 모듈 사용하여 지정, 절대경로로 설정해야 함
    filename: 'my-first-webpack.bundle.js',
  },
};

✔ Loaders(로더)

webpack은 기본적으로 JavaScript와 JSON 파일만 이해한다. 그러나 로더를 사용하면 다른 유형의 파일을 처리하거나, 유효한 모듈로 변환하여 애플리케이션에서 사용하거나 디펜던시 그래프에 추가할 수 있다.

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [
      {
      test: /\.txt$/, 
      use: 'raw-loader' 
      exclude: /node_modules/,
      }
    ],
  },
};

/* require () / import 문 내에서 
'.txt'파일로 확인되는 경로를 발견하면
번들에 추가하기전에 raw-loader를 사용하여 변환해라
*/

test : 변환이 필요한 파일들을 식별하기 위한 속성(필수)
use : 변환을 수행하는데 사용되는 로더를 가리키는 속성(필수)
exclude : 바벨로 컴파일하지 않을 파일or폴더 지정(<-> include : 반드시 컴파일해야 할 파일or폴더 지정)

✔ Plugins(플러그인)

번들의 최적화, asset의 관리, 환경 변수 주입 등의 광범위한 작업을 수행한다.

require () 을 통해 플러그인을 요청하고 plugins 배열에 추가한다.

대부분의 플러그인은 옵션을 통해 사용자 지정이 가능하며, 다른 목적으로 재사용하도록 설정할 수 있으므로 new 연산자로 호출하여 인스턴스를 만들어야 한다.

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 생성된 모든 번들을 자동으로 삽입하여 애플리케이션용 HTML 파일을 생성
const webpack = require('webpack'); // 내장 plugin에 접근하는 데 사용
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // CSS를 별도의 파일로 추출해 CSS를 포함하는 JS 파일 당 CSS 파일을 작성할 수 있게 지원함

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
   	new MiniCssExtractPlugin(),
  ],
};

✔ Mode(모드)

mode parameter를 development, production 또는 none으로 설정하면 webpack에 내장된 환경별 최적화를 활성화할 수 있다.

default 값은 production이다.

module.exports = {
  mode: 'production',
};

✔ Browser Compatibility(브라우저 호환성)

webpack은 ES5가 호환되는 모든 브라우저를 지원한다.

✔ Optimization

webpack의 version.4 부터는 선택된 mode에 따라 최적화를 실행하기 때문에, 여전히 모든 최적화는 수동 구성 및 재정의에 사용할 수 있다 .

module.exports = {
  ...
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ]
  }
};

// mini-css-extract-plugin 에 관련된 번들을 최소화 해라

최적화를 위한 다양한 옵션 중, 대표적으로 minimize와 minimizer를 사용한다.

minimize : TerserPlugin 또는 optimization.minimize에 명시된 plugins로 bundle 파일을 최소화(=압축)시키는 작업 여부를 결정
minimizer : defualt minimizer을 커스텀된 TerserPlugin 인스턴스를 제공해서 재정의할 수 있다.