webpack-dev-server

(★ 7,848)

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

오너의 다른 레포

webpack ★ 65,971

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

JavaScript
webpack-bundle-analyzer ★ 12,660

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

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 다운로드
  • .cspell.json
  • .editorconfig
  • .gitattributes
  • .gitignore
  • .npmrc
  • .prettierignore
  • .versionrc
  • babel.config.js
  • CHANGELOG.md
  • CODE_OF_CONDUCT.md
  • commitlint.config.js
  • CONTRIBUTING.md
  • DOCUMENTATION-v4.md
  • eslint.config.mjs
  • LICENSE
  • lint-staged.config.js
  • migration-v4.md
  • migration-v5.md
  • migration-v6.md
  • package-lock.json
  • package.json
  • README.md
  • tsconfig.client.json
  • tsconfig.json

# 설치 가이드

node
사전 준비물

설치 및 실행 절차

npm install

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

npx webpack serve

개발 서버를 실행합니다.

핵심 명령어

npm install webpack-dev-server --save-dev

webpack-dev-server를 개발 의존성으로 프로젝트에 설치합니다.

npx webpack serve

웹팩 개발 서버를 실행하여 라이브 리로딩 환경을 시작합니다.

개발 목적으로만 사용해야 합니다.

# CDN으로 사용하기

jsDelivr

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

링크
예시

명령어 용어집

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

🔍

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

🔍

npm run

설명 보기 ▼

Run a script.

npm run

List available scripts:

npm run {{script_name}}

Run a script:

npm run {{script_name}} -- {{argument}} {{--option}}

Pass arguments to a script:

🔍

npx

설명 보기 ▼

이 명령은 `npm exec`의 별칭입니다.

tldr npm exec

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

🔍

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