mini-css-extract-plugin

(★ 4,663)

경량 CSS 추출 플러그인

오너의 다른 레포

webpack ★ 65,971

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

JavaScript
webpack-bundle-analyzer ★ 12,660

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

JavaScript
webpack-dev-server ★ 7,848

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

JavaScript
css-loader ★ 4,320

CSS Loader

JavaScript
sass-loader ★ 3,892

Sass를 CSS로 컴파일합니다.

JavaScript
tapable ★ 3,862

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

JavaScript

파일 탐색기

ZIP 다운로드
  • .cspell.json
  • .editorconfig
  • .gitattributes
  • .gitignore
  • .prettierignore
  • babel.config.js
  • CHANGELOG.md
  • commitlint.config.js
  • eslint.config.mjs
  • jest.config.js
  • LICENSE
  • lint-staged.config.js
  • package-lock.json
  • package.json
  • README.md
  • setupTest.js
  • tsconfig.json

# 설치 가이드

node
사전 준비물

설치 및 실행 절차

npm install

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

npm test

테스트 스위트를 실행하여 설치와 빌드가 정상적인지 확인합니다.

핵심 명령어

npm install

프로젝트에 필요한 모든 npm 패키지를 설치합니다.

npm test

Jest를 사용해 프로젝트의 테스트 케이스를 실행합니다.

Webpack 5 환경이 필요하며, css-loader와 함께 사용하는 것을 권장합니다.

# CDN으로 사용하기

jsDelivr

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

링크
예시

명령어 용어집

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

🔍

link

설명 보기 ▼

기존 파일에 대한 하드 링크 생성.
더 많은 옵션은 `ln` 명령을 참조하세요.
더 많은 정보: <https://www.gnu.org/software/coreutils/manual/html_node/link-invocation.html>.

link {{path/to/existing_file}} {{path/to/new_file}}

기존 파일에 새로운 파일로 하드 링크 생성:

🔍

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`:

🔍

pnpm

설명 보기 ▼

빠르고, 디스크 공간 효율적인 Node.js용 패키지 관리자.
Node.js 프로젝트 및 해당 모듈 의존성 관리.
더 많은 정보: <https://pnpm.io/pnpm-cli>.

pnpm init

`package.json` 파일 생성:

pnpm {{[i|install]}}

`package.json`에 의존성으로 나열된 모든 패키지를 다운로드:

pnpm add {{module_name}}@{{version}}

특정 버전의 패키지를 다운로드하여 `package.json`의 의존성 목록에 추가:

🔍

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` 추가):

// repository documentation