번들러

지니씨·2023년 2월 26일

Rollup esbuild gulp module bundler parcel vite webpack

프론트엔드

목록 보기

59/85

Vite

처음에는 Vue를 위해 만들어졌으나 지금은 React 등 다른 프레임워크와 라이브러리에도 지원 가능
https://github.com/vitejs/awesome-vite
https://velog.io/@wynter_j/Bundler-JavaScript-%EB%B2%88%EB%93%A4%EB%9F%AC-%EA%B7%B8%EB%A6%AC%EA%B3%A0-Webpack-Parcel-Rollup-Vite...-2

Vite 플러그인은 기본적으로 현재 빌드 또는 개발 환경에서 사용되는 파일에 대해서만 변환 작업을 수행합니다. 따라서 호출되지 않는 저장소 내 파일은 Vite 플러그인 내에서 직접적으로 변환할 수는 없습니다.

Vite 플러그인은 빌드 또는 개발 서버 실행 시에만 작동하며, 플러그인 내에서 파일을 변환하는 작업은 플러그인의 transform 함수 내에서 수행됩니다. 이 함수는 현재 처리 중인 파일에 대해 호출됩니다.

호출되지 않는 파일에 대한 변환 작업을 수행하려면 다른 방법을 고려해야 할 수 있습니다. 예를 들어, 빌드 스크립트를 사용하여 저장소 내 파일을 변환하거나, 필요한 경우 해당 파일을 직접 수정하는 방법을 사용할 수 있습니다. Vite 플러그인은 Vite의 빌드 및 개발 환경 내에서 작동하는 도구이므로, 저장소 내의 모든 파일을 변환하는 것은 플러그인의 범위를 벗어난 작업입니다.

Webpack

아래 설명은 모두 webpack5 기준임

https://webpack.kr/guides/
storybook web components 6.x 테스트 중 메모...

storybook web compoentns webpack5 설치

npx storybook init --type web_components
npx sb init --builder webpack5

// webpack5 설치 후 lit-element 오류로 lit-elemnet 대신 lit 설치

webpack은
여러 파일들을 하나로 합쳐주면서 크로스 브라우징 이슈도 대응해줌
다양한 모듈들을 하나의 js 파일로 만들어줌.

Concepts
https://webpack.kr/concepts/

JavaScript 애플리케이션을 위한 정적 모듈 번들러

핵심개념

1. Entry

기본값 ./src/index.js, entry 속성을 설정하여 다른 또는 여러 엔트리 포인트 지정 가능

엔드리 포인트 https://webpack.kr/concepts/entry-points

싱글 엔트리
객체 구문
플리케이션에서 엔트리를 정의하는 가장 확장 가능한 방법입니다.
플러그인에 의해 생성된 엔트리 포인트만 있는 경우 빈 객체 {}를 entry에 전달할 수 있습니다.
엔트리 포인트 옵션
dependOn
: 이 엔트리 포인트 로드 전 로드해야하는 엔트리
: 순한이면 안됨
filename: 디스크에 있는 각 출력 파일의 이름 지정
import: 시작 시 로드되는 모듈
library: 현재 엔트리에서 라이브러리를 번들링하려면 라이브러리 옵션 지정
runtime
: 런타임 청크의 이름 (기존 엔트리 포인트 이름 기본값)
: 기존의 엔트리 포인트 이름 가리키지 않아야 함
publichPath
: 브라우저에서 참조할때 이 엔트리의 출력 파일에 대한 공용 URL 주소 지정 (output.publichPath 도 참고)

2. Output

생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할
여러 진입점이 있을 수 있지만 하나의 출력 설정만 지정됨
설정에서 하나 이상의 청크를 생성하면(다중 엔트리 포인트나 CommonsChunkPlugin와 같은 플러그인을 사용하는 경우) substitution을 사용하여 파일이 고유한 이름을 갖도록 해야 함
출력 파일의 최종 publichPath를 컴파일 시점에서 알 수 없는 경우 공백으로 남겨두고 런타임에 엔트리 포인트 파일의 webpack_public_path를 통해 동적으로 설정할 수 있습니다.

https://webpack.js.org/configuration/output/

3. Loaders

https://velog.io/@kwonh/webpack-%EC%9B%B9%ED%8C%A9-%EA%B8%B0%EB%B3%B8%EC%84%A4%EC%A0%951-Loader%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0babel-loadercss-loaderstyle-loader
webpack은 기본적으로 JavaScript와 JSON파일만 이해
이외 파일은 로더를 통해 특정 유형의 모듈을 변환
상위 수준에서 로더는 webpack 설정에 두 가지 속성(test, use)을 가짐

// 예시
const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};
// "이봐 webpack 컴파일러, require ()/import 문 내에서 '.txt' 파일로 확인되는 경로를 발견하면 번들에 추가하기 전에 raw-loader를 사용하여 변환해."

스타일

css-loader가 먼저 CSS데이터를 생성
style-loader가 HTML head에 style태그 삽입

const path = require('path')
module.exports = {
    // ...
    module:{
        rules:[
    //...
            {
                test:/\.css$/,
                use:['style-loader','css-loader'],
            },
        ],
    },
    mode : 'production'
};

https://yamoo9.gitbook.io/webpack/webpack/webpack-loaders/postcss

4. Plugins

플러그인을 활영하여 번들을 최적화하거나 애셋을 관리하고 환경 변수 주입등과 같은 광범위한 작업 수행

5. Mode

6. 브라우저 호환성

코드 스플리팅 (Code Splitting)

https://webpack.kr/guides/code-splitting/
코드를 다양한 번들로 분할하고, 요청에 따라 로드하거나 병렬로 로드할 수 있음
요청에 따라 로드하거나 병렬로 로드할 수 있음

세 가지 방식으로 접근 가능

Entry Points : entry 설정을 사용하여 코드를 수동으로 분할
Prevent Duplication : Entry dependencies 또는 SplitChunksPlugin을 사용하여 중복 청크 제거하고 청크 분할
Dynamic Imports : 모듈 내에서 인라인 함수 호출을 통해 코드 분할

assets 관리

asset modules

https://webpack.kr/guides/asset-modules/
로더를 추가로 구성하지 않아도 애셋 파일 사용할 수 있도록 도와주는 모듈
(과거에 사용하던 raw-loader, url-loader, file-loadr 대체)

사용되지 않은 이미지(html에서 사용되어도 x)는 asset폴더로 넣지 않음

// 파일명, 사이즈 체크 가능
parser: {
    dataUrlCondition: (source, { filename, module }) => {
        const maxSize = 1024 * 4;
        return !filename.includes('img') && source.length < maxSize;
    },
},