webpack-bundle-analyzer

(★ 12,660)

번들 콘텐츠를 편리하고 상호작용 가능한 줌 기능이 있는 트리맵으로 시각화해 주는 Webpack 플러그인 및 CLI 유틸리티

오너의 다른 레포

webpack ★ 65,971

JavaScript 및 관련 생태계를 위한 번들러입니다. 여러 개의 모듈을 소수의 번들된 에셋으로 묶어줍니다. 코드 분할(Code Splitting)을 통해 애플리케이션의 특정 부분을 필요할 때 로드할 수 있습니다. "로더(loaders)"를 통해 CommonJS, AMD, ES6 모듈뿐만 아니라 CSS, 이미지, JSON, Coffeescript, LESS 및 사용자 정의 항목까지 다양한 모듈을 처리할 수 있습니다.

JavaScript
webpack-dev-server ★ 7,848

webpack 앱을 실행합니다. 변경 사항이 생기면 브라우저를 업데이트합니다. 문서: https://webpack.js.org/configuration/dev-server/

JavaScript
mini-css-extract-plugin ★ 4,663

경량 CSS 추출 플러그인

JavaScript
css-loader ★ 4,320

CSS Loader

JavaScript
sass-loader ★ 3,892

Sass를 CSS로 컴파일합니다.

JavaScript
tapable ★ 3,862

플러그인을 위한 아주 간단한 모듈입니다.

JavaScript

파일 탐색기

ZIP 다운로드
  • .babelrc
  • .browserslistrc
  • .editorconfig
  • .gitignore
  • .npm-upgrade.json
  • .nvmrc
  • .prettierignore
  • CHANGELOG.md
  • CONTRIBUTING.md
  • eslint.config.mjs
  • jest.config.js
  • LICENSE
  • package-lock.json
  • package.json
  • prettier.config.mjs
  • README.md
  • tsconfig.json
  • webpack.config.js

# 설치 가이드

node
사전 준비물

설치 및 실행 절차

npm install

프로젝트의 의존성 패키지를 설치합니다.

npm run build

프로젝트를 빌드합니다.

npm test

테스트 스위트를 실행합니다.

핵심 명령어

npm install --save-dev webpack-bundle-analyzer

개발 의존성으로 웹팩 번들 분석기를 프로젝트에 설치합니다.

npm run build

소스 코드를 빌드하여 산출물을 생성합니다.

npm test

Jest를 사용하여 프로젝트의 테스트를 실행합니다.

webpack 설정 파일에 BundleAnalyzerPlugin을 추가하여 시각화 기능을 사용할 수 있습니다.

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

링크
예시

명령어 용어집

이 문서에서 사용된 명령어를 모아봤습니다. 낯선 명령어가 있다면 펼쳐서 확인해보세요.

🔍

brotli

설명 보기 ▼

Brotli 압축을 사용하여 파일을 압축/압축 해제.
더 많은 정보: <https://manned.org/brotli>.

brotli {{path/to/file}}

파일을 압축하여 파일 옆에 압축 버전을 생성:

brotli {{[-d|--decompress]}} {{path/to/file.br}}

파일을 압축 해제([d]ecompress)하여, 파일 옆에 압축되지 않은 버전을 생성:

brotli {{path/to/file}} {{[-o|--output]}} {{path/to/compressed_output_file.br}}

출력([o]utput) 파일 이름을 지정하여, 파일을 압축:

🔍

gzip

설명 보기 ▼

`gzip` 압축 (LZ77)을 사용하여 파일 압축/압축 해제.
더 많은 정보: <https://www.gnu.org/software/gzip/manual/gzip.html>.

gzip {{path/to/file}}

파일을 압축하여, `gzip` 아카이브로 대체:

gzip {{[-d|--decompress]}} {{path/to/file.gz}}

파일의 압축을 풀어, 원래의 압축되지 않은 버전으로 교체:

gzip {{[-v|--verbose]}} {{path/to/file.gz}}

원본 파일을 유지하면서, 파일을 압축:

🔍

npm install

설명 보기 ▼

Install Node packages.

npm {{[i|install]}}

Install dependencies listed in `package.json`:

npm {{[i|install]}} {{package_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

npm {{[i|install]}} {{package_name}} {{[-D|--save-dev]}}

Download the latest version of a package and add it to the list of dev dependencies in `package.json`:

🔍

stat

설명 보기 ▼

파일 및 파일 시스템 정보를 표시.
관련 항목: `file`.
더 많은 정보: <https://www.gnu.org/software/coreutils/manual/html_node/stat-invocation.html>.

stat {{path/to/file}}

특정 파일에 대한 속성(크기, 권한, 생성 및 액세스 날짜 등) 표시:

stat {{path/to/file}}

파일의 크기, 권한, 생성 및 접근 날짜 등의 속성 표시:

stat {{[-t|--terse]}} {{path/to/file}}

레이블 없이 특정 파일에 대한 속성(크기, 권한, 생성 및 액세스 날짜 등) 표시:

🔍

webpack

설명 보기 ▼

웹 프로젝트의 자바스크립트 파일과 기타 리소스를 단일 출력 파일로 묶어줍니다.
더 많은 정보: <https://webpack.js.org/api/cli/>.

webpack {{app.js}} {{bundle.js}}

진입점이 되는 파일에서 단일 출력 파일 생성:

webpack {{app.js}} {{bundle.js}} --module-bind '{{css=css}}'

자바스크립트 파일에서도 CSS 파일을 로드 (이 경우 CSS 파일에 CSS 로더를 사용합니다):

webpack {{[-c|--config]}} {{webpack.config.js}} --progress

구성 파일(예, 입력 스크립트 및 출력 파일 이름 포함)을 전달하고 컴파일 진행률을 표시:

🔍

yarn

설명 보기 ▼

JavaScript 및 Node.js 패키지 대체 관리자.
더 많은 정보: <https://yarnpkg.com/cli>.

yarn global add {{module_name}}

전역적으로 모듈 설치:

yarn install

`package.json` 파일에 참조된 모든 의존성을 설치 ( `install`은 선택 사항입니다):

yarn add {{module_name}}@{{version}}

모듈을 설치하고 `package.json` 파일에 대한 의존성으로 저장 (개발 전용 의존성으로 추가하려면 `--dev` 추가):

🔍

zstd

설명 보기 ▼

Zstandard 압축을 사용하여 파일을 압축하거나 압축 해제.
더 많은 정보: <https://manned.org/zstd>.

zstd {{path/to/file}}

파일을 `.zst` 확장자로 새 파일로 압축:

zstd {{[-d|--decompress]}} {{path/to/file.zst}}

파일 압축 해제:

zstd {{[-d|--decompress]}} {{[-c|--stdout]}} {{path/to/file.zst}}

`stdout`으로 압축 해제:

// repository documentation