번들링 & 웹팩

Min Seong Kim·2022년 9월 26일
0

번들링(Bundling)

기능별로 모듈화한 JS파일들을 묶어준다는 뜻.

❗️번들링 사용되기 전 문제점

  • 서로다른 두 개 파일에서 같은 변수/함수 사용 시, 충돌 발생
  • 네트워크 부하
  • 한번 불러오는 프레임워크 코드가 8MB라, 인터넷 속도가 느린 국가의 사용자가 불편함
  • import / export가 구형 웹브라우저에서 동작 안함
  • 배포 코드가 읽기 쉬운 경우, 사용자가 프론트엔드 애플리케이션을 임의로 조작하는 피해가 발생

Webpack

여러 개 파일(html,css,js,jpg,pnp 등)을 하나로 묶는 모듈 번들러

모듈번들러 등장배경

대형 작업으로 인해 JS파일이 증가하면서 각 변수들의 스코프 문제, 각 자원(html,css,js 등)을 호출할 때 생기는 네트워크 쪽 코스트 문제.

이에 대한 대응방안으로 시작점(ex. React 앱의 index.js)으로부터 의존성을 가지는 모듈을 모두 추적해서 하나로 만드는 모듈 번들러가 등장.

📌필요성

  • 웹 앱의 빠른 로딩 속도, 높은 성능

  • 웹팩으로 같은 타입의 파일들을 한 대 묶어서 요청/응답 받으므로 네트워크 코스트 절감

  • Webpack loader를 사용하면 ES6의 문법들을 ES5로 번환해주는 babel-loader를 사용할 수 있음.
    Vue의 경우 vue-loader를,
    scss 경우는 css 파일로 변환해주는 scss-loader 등의 loader도 사용할 수 있기에 각자가 선택해 개발할 수 있음

  • Webpack4 버전 이상부터 Develoment, Production 두 가지 모드를 지원.
    Production 모드의 경우, 코드 난독화, 압축, 최적화(Tree Shaking) 작업 지원

📝핵심 개념

webpack의 config 파일

module.exports = {
  target: ["web", "es5"],
  entry: "./src/script.js",
  output: {
    path: path.resolve(__dirname, "docs"),
    filename: "app.bundle.js",
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
    new MiniCssExtractPlugin(),
  ],
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ]
  }
};

Target

다양한 환경 컴파일 가능하게 함

  • 기본값: web
  • "es5" 넣으면 지정된 ECMAScript 5버전으로 컴파일함
  • Browser Compatibility 호환성과 연관됨.

Entry

시작점

  • entry 파일이 모든 것을 모아서 번들링함
  • webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용해야 하는 모듈
  • 기본값 ./src/index.js
//기본 값
  entry: "./src/index.js",
//지정 값
  entry: "./src/script.js",

Output

번들 내보낼 위치path, 번들 파일명filename 지정방법을 웹팩에 알려줌

  • 기본 출력 파일: ./dist/main.js
  • 생성된 기타 파일: ./dist 폴더
  • path : 번들링된 결과물이 담길 주소
  • path 속성 사용 시 path 모듈을 사용해야만 함
const path = require('path');
module.exports = {
	...
  output: {
    path: path.resolve(__dirname, "docs"), // 절대 경로로 설정 해야 한다. 
    filename: "app.bundle.js",
    clean: true // 번들링할때마다 dist폴더 정리하기
  },
};

Loaders

JavaScript, JSON이 아닌 파일을 불러오는 역할
웹팩은 기본적으로 JS, JSON파일만 이해한다.
그러나 Loaders 사용 시, 웹팩이 다른 유형 파일을 처리하거나, 유효한 모듈로 변환해 앱에 사용하거나 dependency 그래프에 추가할 수 있음

  • test(필수) : 변환이 필요한 파일들을 식별하기 위한 속성
  • use(필수) : 변환을 수행하는데 사용되는 로더를 가리키는 속성
  • exclude : 바벨로 컴파일 안할 파일/폴더를 지정.
    (include 속성 : 반드시 컴파일해야 할 파일/폴더 지정 가능)
  • module.rules 아래에 정의해야 한다. 그냥 rules 아래에 정의하면 webpack은 경고한다.
module.exports = {
	...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
};

Plugins

번들 최적화, 에셋 관리, 환경변수 주입 등 광범위한 작업 수행 가능

  • require()로 플러그인 먼저 요청
  • plugins 배열에 사용하고자 하는 플러그인을 추가
  • 다른 목적으로 플러그인을 재사용하도록 설정할 수 있기 때문에 new 연산자를 사용해 호출하여 플러그인의 인스턴스 생성
  • html-webpack-plugin
    생성된 모든 번들을 자동 삽입하여 애플리케이션용 HTML 파일을 생성
  • mini-css-extract-plugin
    CSS를 별도의 파일로 추출해 CSS를 포함하는 JS 파일 당 CSS 파일을 작성해주게끔 지원
const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
    new MiniCssExtractPlugin(),
  ],
};

Optimization 최적화

웹팩 버전4부터 선택항목에 따른 최적화 가능

  • minimize
    TerserPlugin 또는 optimization.minimize에 명시된 plugins로 bundle 파일을 최소화(=압축)시키는 작업 여부를 결정
  • minimizer
    defualt minimizer을 커스텀된 TerserPlugin 인스턴스를 제공해서 재정의할 수 있다.
  • 밑에서는 mini-css-extract-plugin 관련 번들을 최소화하도록 지시.
module.exports = {
  ...
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ]
  }
};
profile
Min Seong Kim
의미 있는 개발자
이전 포스트

Redux

다음 포스트

Optimization (최적화)

0개의 댓글