Diiiiiikey

Blog

프론트엔드 개발자에게 번들은 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음

Webpack

프론트엔드 애플리케이션 배포를 위해 가장 많이 사용하는 번들러

https://webpack.kr/

하나의 파일로 합쳐주는 모듈 번들러

모듈 번들러 - HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구

JavaScript 코드 양 증가, 세분화된 모듈 파일 증가 -> 변수들의 스코프 문제를 해결, 자원 호출 시 생겨나는 네트워크 쪽의 코스트 관리 필요에 의해 모듈 번들러 등장

주요 구성 요소인 로더(loader)를 통해 다양한 파일도 번들링 가능

빌드는 개발이 완료된 앱을 배포하기 위해 하나의 폴더(directory)로 구성하여 준비하는 작업

번들링은 묶음의 개념, 모듈 간의 의존성 관계를 파악해 그룹화 하는 작업

Webpack의 필요성

빠른 로딩 속도와 높은 성능을 위해

같은 타입의 파일들은 묶어서 요청 및 응답을 받을 수 있기 때문에 네트워크 코스트가 획기적으로 줄어듬

Webpack loader - 일부 브라우저에서 지원하지 않는 JavaScript ES6의 문법들을 ES5로 번환해주는 babel-loader 사용 가능

Vue는 vue-loader, scss는 css로 변환해주는 scss-loader 등의 loader도 사용 가능

Production 모드로 번들링 - 코드 난독화, 압축, 최적화(Tree Shaking) 작업 지원

웹팩의 핵심 개념

  • Entry
  • Output
  • Loaders
  • Plugins
  • Mode
  • Browser Compatibility

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
  • esX를 넣으면 지정된 ECMAScript 버전으로 컴파일
  • 예시에서는 작성된 코드를 es5 버전으로 컴파일

Entry(엔트리)

  • 프론트엔드 개발자가 작성한 코드의 “시작점”
  • webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용
  • Entry point를 기반으로 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아냄

Output(출력)

  • 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할
  • 기본 출력 파일은 ./dist/main.js로, 생성된 기타 파일은 ./dist 폴더로 설정
  • path 속성을 사용할 때는 path 모듈을 사용, 절대 경로로 설정

Loader(로더)

  • 기본적으로 JavaScript와 JSON 파일만 이해
  • loader를 사용하면 다른 유형의 파일을 처리 가능, 유효한 모듈로 변환해 애플리케이션에 사용 가능, 디펜던시 그래프에 추가 가능
  • test - 변환이 필요한 파일 식별하는 속성
  • use - 변환 수행에 사용되는 로더를 가리키는 속성
  • exclude - 바벨로 컴파일하지 않을 파일이나 폴더를 지정
  • include - 반드시 컴파일해야 할 파일이나 폴더 지정
  • test, use 속성은 필수
  • module.rules 아래에 정의
  • 오른쪽에서 왼쪽(또는 아래에서 위로)으로 평가/실행됨

Plugins(플러그인)

  • 번들 최적화, 에셋을 관리, 환경변수 주입 등의 광범위한 작업 수행
  • require()로 플러그인 요청
  • plugins 배열에 사용 플러그인 추가
  • new 연산자를 사용해 호출, 플러그인 인스턴스 생성
  • html-webpack-plugin - 모든 번들을 자동으로 삽입하여 애플리케이션용 HTML 파일을 생성
  • mini-css-extract-plugin - CSS를 별도의 파일로 추출해 CSS를 포함하는 JS 파일 당 CSS 파일을 작성해주게끔 지원

Optimization(최적화)

  • 대표 minimize, minimizer
  • minimize - TerserPlugin 또는 optimization.minimize에 명시된 plugins로 bundle 파일 최소화(=압축) 작업 여부 결정
  • minimizer - defualt minimizer을 커스텀된 TerserPlugin 인스턴스를 제공하여 재정의

webpack의 주요 컨셉 1

  • entry 파일이 필요한 모든 것을 webpack이 모아서 번들링
  • 번들링의 결과물이 output 경로로 산출
번들링 경로


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

webpack의 주요 컨셉 2

  • loader는 JavaScript, JSON이 아닌 파일을 불러오는 역할
번들링 경로


webpack의 주요 컨셉 3

  • 플러그인은 번들링 과정 중 개발자가 원하는 다양한 작업 하도록 도움
  • html-webpack-plugin은 번들링 과정 중 html 파일을 자신이 원하는 형태로 가공하여 번들에 포함
번들링 경로 plugin


댓글남기기

참고