css-loader

(★ 4,320)

CSS Loader

오너의 다른 레포

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
mini-css-extract-plugin ★ 4,663

경량 CSS 추출 플러그인

JavaScript
sass-loader ★ 3,892

Sass를 CSS로 컴파일합니다.

JavaScript
tapable ★ 3,862

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

JavaScript

파일 탐색기

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

# 설치 가이드

node
사전 준비물

설치 및 실행 절차

npm install

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

npm test

설치된 의존성과 소스코드가 정상 동작하는지 테스트를 실행합니다.

핵심 명령어

npm install

package.json에 정의된 프로젝트 의존성 패키지를 설치합니다.

npm test

Jest를 기반으로 테스트 스위트를 실행합니다.

css-loader를 사용하려면 webpack@5 버전이 요구됩니다.

# CDN으로 사용하기

jsDelivr

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

링크
예시

명령어 용어집

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

🔍

edit

설명 보기 ▼

Microsoft에서 만든 터미널 기반 텍스트 편집기.
더 많은 정보: <https://github.com/microsoft/edit>.

edit {{path/to/file}}

파일 열기:

tldr run-mailcap

자세한 내용은 원본 명령을 참고하세요:

<Ctrl f>{{pattern}}<Enter>

패턴 검색:

🔍

eval

설명 보기 ▼

현재 쉘에서 인수를 단일 명령으로 실행하고 그 결과를 반환.
더 많은 정보: <https://www.gnu.org/software/bash/manual/bash.html#index-eval>.

eval "{{echo foo}}"

"foo" 인수를 사용하여 `echo`를 호출:

eval "{{foo=bar}}"

현재 쉘에서 변수를 설정:

🔍

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