Command Line Interface

이 설정을 적절하게 사용하고 쉽게 배포하려면 webpack.config.jsë¡œ webpack을 설정 í•  수 있습니다. CLIë¡œ 전송된 모든 파라미터는 설정 파일의 해당 파라미터에 매핑됩니다.

webpack 및 CLI를 아직 설치하지 않은 경우 설치 가이드를 읽어보세요.

Commands

webpack-cli는 webpack을 더 쉽게 사용할 수 있도록 다양한 명령을 제공합니다. 기본적으로 webpack은 다음과 같은 명령어를 제공합니다.

Build

webpack을 실행합니다. (기본 명령어, 생략 가능).

npx webpack build [options]

example

npx webpack build --config ./webpack.config.js --stats verbose

Init

create-new-webpack-app를 사용하여 새로운 webpack 프로젝트를 초기화하기 위해 사용합니다.

npx create-new-webpack-app [generation-path] [options]

예시

npx create-new-webpack-app ./my-app --force --template=default

별칭으로:

npx create-new-webpack-app init ./my-app --force --template=default

Generation Path

설정을 생성할 위치입니다. 기본값은 process.cwd()입니다.

Options

-t, --template

string = 'default'

생성할 템플릿의 이름입니다.

-f, --force

boolean

질문 없이 프로젝트를 생성합니다. 활성화하면 각 질문에 대한 기본 답변을 사용합니다.

Templates supported

• --template=default - 기본 설정을 갖춘 템플릿입니다.
• --template=react - React 설정을 사용한 템플릿입니다.
• --template=vue - Vue 설정을 사용한 템플릿입니다.
• --template=svelte - Svelte 설정을 사용한 템플릿입니다.

Loader

로더를 스캐폴드합니다.

npx create-new-webpack-app loader [output-path] [options]

example

npx create-new-webpack-app loader ./my-loader --template=default

Output Path

출력 디렉터리 경로, 예) ./loader-name.

Options

-t, --template

string = 'default'

템플릿의 유형입니다.

Plugin

플러그인을 스캐폴드합니다.

npx create-new-webpack-app plugin [output-path] [options]

example

npx create-new-webpack-app plugin ./my-plugin --template=default

Output Path

출력 디렉터리 경로, 예) ./plugin-name.

Options

-t, --template

string = 'default'

템플릿의 유형입니다.

Info

시스템에 대한 정보를 출력합니다.

npx webpack info [options]

예시

npx webpack info --output json --addition-package postcss

Options for info

-a, --additional-package

string

출력에 패키지를 추가합니다.

예시

npx webpack info --additional-package postcss

-o, --output

string : 'json' | 'markdown'

지정된 형식으로 출력을 가져옵니다.

예시

npx webpack info --output markdown

Configtest

webpack 설정을 검증합니다.

npx webpack configtest [config-path]

예시

npx webpack configtest ./webpack.config.js

Config Path

webpack 설정 파일의 경로입니다. 기본값은 ./webpack.config.js입니다.

Serve

webpack dev server를 실행합니다.

npx webpack serve [options]

example

npx webpack serve --static --open

Watch

webpack을 실행하고 파일 변경을 감지합니다.

npx webpack watch [options]

example

npx webpack watch --mode development

Flags

기본적으로 webpack은 다음 플래그와 함께 제공됩니다.

Negated Flags

Core Flags

CLI v4와 webpack v5부터 CLI는 webpack 코어에서 전체 설정 스키마를 가져옵니다. 커맨드 라인에서 거의 모든 설정 옵션을 조정할 수 있습니다.

CLI v4를 통한 webpack v5에서 지원하는 모든 코어 플래그 목록입니다. - 링크

예를 들어, 프로젝트에서 성능 힌트를 활성화하려면 설정에서 이 옵션을 사용할 수 있습니다. 코어 플래그를 사용하면 아래와 같이 할 수 있습니다.

npx webpack --performance-hints warning

Usage

With configuration file

npx webpack [--config webpack.config.js]

설정 파일의 옵션은 configuration을 참고하세요.

Without configuration file

npx webpack --entry <entry> --output-path <output-path>

예시

npx webpack --entry ./first.js --entry ./second.js --output-path /build

entry

프로젝트 빌드를 위한 엔트리 포인트 파일명 또는 명명된 파일명 모음입니다. 복수의 엔트리를 전달할 수 있습니다 (모든 항목은 시작 시 로드됩니다). 다음은 CLI를 통해 엔트리 파일을 지정하는 여러 가지 방법입니다.

npx webpack --entry-reset ./first-entry.js

npx webpack --entry-reset --entry ./first-entry.js

npx webpack --entry-reset ./first-entry.js ./other-entry.js

npx webpack --entry-reset --entry ./first-entry.js ./other-entry.js

output-path

저장할 번들 파일의 경로입니다. 설정 옵션의 output.path에 매핑됩니다.

예시

프로젝트 구조가 다음과 같다고 가정해봅니다.

.
├── dist
├── index.html
└── src
    ├── index.js
    ├── index2.js
    └── others.js

npx webpack ./src/index.js --output-path dist

이 명령어는 소스 코드와 엔트리를 함께 index.jsë¡œ 번들합니다. 출력 번들 파일의 경로는 dist입니다.

asset main.js 142 bytes [compared for emit] [minimized] (name: main)
./src/index.js 30 bytes [built] [code generated]
./src/others.js 1 bytes [built] [code generated]
webpack 5.1.0 compiled successfully in 187 ms

npx webpack ./src/index.js ./src/others2.js --output-path dist/

이것은 두 파일을 별도의 엔트리 포인트로 포함하는 번들을 생성합니다.

asset main.js 142 bytes [compared for emit] [minimized] (name: main)
./src/index.js 30 bytes [built] [code generated]
./src/others2.js 1 bytes [built] [code generated]
./src/others.js 1 bytes [built] [code generated]
webpack 5.1.0 compiled successfully in 198 ms

Default Configurations

CLI는 프로젝트 경로에서 일부 기본 설정을 찾습니다. 아래는 CLI에서 찾는 설정 파일입니다.

오름차순으로 우선 조회합니다.

예 - 설정 파일 조회 순서는 .webpack/webpackfile > .webpack/webpack.config.js > webpack.config.js 입니다.

'webpack.config',
'.webpack/webpack.config',
'.webpack/webpackfile',

Common Options

help

CLI에서 사용 가능한 기본 명령 및 플래그 나열

webpack help [command] [option] 및 webpack [command] --help 모두 유효합니다.

npx webpack --help

# or

npx webpack help

CLI에서 지원하는 모든 명령 및 플래그를 나열

npx webpack --help=verbose

특정 명령어 또는 옵션에 대한 도움말 보기

npx webpack help --mode

version

설치된 패키지 및 하위 패키지의 버전 표시

사용 중인 webpack 및 webpack-cli의 버전을 검사하려면 다음 명령을 실행하세요.

npx webpack --version

# or

npx webpack version

다음 결과가 출력됩니다.

webpack 5.31.2
webpack-cli 4.6.0

webpack-dev-serverê°€ 설치된 경우 해당 버전도 출력합니다.

webpack 5.31.2
webpack-cli 4.6.0
webpack-dev-server 3.11.2

@webpack-cli/info와 같은 webpack-cli의 하위 패키지 버전을 검사하려면 다음과 같은 명령을 실행합니다.

npx webpack info --version

그러면 다음 결과가 출력됩니다.

@webpack-cli/info 1.2.3
webpack 5.31.2
webpack-cli 4.6.0
webpack-dev-server 3.11.2

config

설정 파일을 사용하여 소스 빌드

기본값 중 하나인 webpack.config.jsê°€ ì•„ë‹Œ 다른 configuration 파일을 지정합니다.

npx webpack --config example.config.js

config-name

설정 파일이 여러 설정을 내보내는 경우 --config-name을 사용하여 실행할 설정을 지정할 수 있습니다.

아래와 같은 webpack.config.js를 생각해 봅시다.

module.exports = [
  {
    output: {
      filename: './dist-first.js',
    },
    name: 'first',
    entry: './src/first.js',
    mode: 'development',
  },
  {
    output: {
      filename: './dist-second.js',
    },
    name: 'second',
    entry: './src/second.js',
    mode: 'development',
  },
  {
    output: {
      filename: './dist-third.js',
    },
    name: 'third',
    entry: './src/third.js',
    mode: 'none',
    stats: 'verbose',
  },
];

second 설정만 실행합니다.

npx webpack --config-name second

여러 값을 전달할 수도 있습니다.

npx webpack --config-name first --config-name second

merge

--merge의 도움으로 두 ê°œ 이상의 서로 다른 webpack 설정을 병합할 수 있습니다.

npx webpack --config ./first.js --config ./second.js --merge

extends

--extends를 사용하여 기존 webpack 설정을 확장할 수 있습니다.

npx webpack --extends ./base.webpack.config.js

설정 확장에서 자세한 내용을 읽어보세요.

json

webpack 결과를 JSON으로 출력

npx webpack --json

통계를 출력하는 대신 json으로 저장

npx webpack --json stats.json

다른 모든 경우에 webpack은 번들, 청크 및 타이밍 세부 정보를 보여주는 일련의 통계를 출력합니다. 이 옵션을 사용하면 출력이 JSON 객체가 될 수 있습니다. webpack의 분석 도구, chrisbateman의 webpack-visualizer 또는 th0r의 webpack-bundle-analyzer 에서 이 응답이 수락됩니다. 이러한 분석 도구는 JSON을 가져와서 빌드의 모든 세부 정보를 그래픽 형식으로 제공합니다.

Environment Options

webpack 설정이 함수를 내보낼 때"environment"를 설정에 전달할 수 있습니다.

env

npx webpack --env production    # env.production = true

--env 인수는 복수의 값을 허용합니다.

위에 표시된 사용자 정의 env 외에도 env 하위에는 webpack 설정 내에서 사용되는 몇 가지 내장 기능이 있습니다.

번들 코드 내에서는 이러한 내장 환경 변수에 접근할 수 없는 점을 알아두세요.

module.exports = (env, argv) => {
  return {
    mode: env.WEBPACK_SERVE ? 'development' : 'production',
  };
};

node-env

--node-env 옵션을 사용하여 process.env.NODE_ENV를 설정할 수 있으며, 이는 사용자 코드와 webpack 설정 모두에서 사용할 수 있습니다.

npx webpack --node-env production   # process.env.NODE_ENV = 'production'

config-node-env

process.env.NODE_ENV를 설정하기 위한 --node-env의 별칭입니다.

npx webpack --config-node-env production   # process.env.NODE_ENV = 'production'

설정에서 mode 옵션이 지정되지 않은 경우 --config-node-env 옵션을 사용하여 mode를 설정할 수 있습니다. 예를 들어, --config-node-env production을 사용하면 process.env.NODE_ENV와 modeê°€ 모두 'production'으로 설정됩니다.

설정이 함수를 내보내는 경우, 함수가 반환된 후 --config-node-env 값이 mode에 할당됩니다. 즉, mode는 함수 인수(env 및 argv)에서 사용할 수 없습니다. 그러나 --config-node-env의 값은 함수 내에서 argv.nodeEnvë¡œ ì ‘ê·¼ 가능하며 그에 따라 사용할 수 있습니다.

module.exports = (env, argv) => {
  console.log(argv.defineProcessEnvNodeEnv); // 'production' --config-node-env production이 사용되는 경우
  return {
    // 당신의 설정
  };
};

Configuration Options

Analyzing Bundle

webpack-bundle-analyzer를 사용하여 webpack에서 내보낸 출력 번들을 분석할 수 있습니다. --analyze 플래그를 사용하여 CLI를 통해 호출 í•  수 있습니다.

npx webpack --analyze

Progress

webpack 컴파일 진행 상황을 확인하려면 --progress 플래그를 사용합니다.

npx webpack --progress

진행 단계에 대한 프로필 데이터를 수집하려면 --progress 플래그에 profile을 값으로 전달할 수 있습니다.

npx webpack --progress=profile

Pass CLI arguments to Node.js

Node.js 프로세스에 직접 인수를 전달하려면 NODE_OPTIONS 옵션을 사용할 수 있습니다.

예를 들어, Node.js 프로세스의 메모리 제한을 4GB로 늘리려면 아래와 같이 사용합니다.

NODE_OPTIONS="--max-old-space-size=4096" webpack

또한 Node.js 프로세스에 복수의 옵션을 전달할 수 있습니다.

NODE_OPTIONS="--max-old-space-size=4096 -r /path/to/preload/file.js" webpack

Exit codes and their meanings

CLI Environment Variables

WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG=true npx webpack --config ./webpack.config.esm

WEBPACK_PACKAGE

CLI에서 사용자 정의 webpack 버전을 사용합니다. package.json에서 다음 내용을 고려합니다.

{
  "webpack": "^4.0.0",
  "webpack-5": "npm:webpack@^5.32.0",
  "webpack-cli": "^4.5.0"
}

webpack v4.0.0을 사용하려면 아래 명령을 사용합니다.

npx webpack

webpack v5.32.0을 사용하려면 아래 명령을 사용합니다.

WEBPACK_PACKAGE=webpack-5 npx webpack

Troubleshooting

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for ./webpack.config.ts

TypeScript에서 기본 ESM을 사용하는 경우 이와 같은 오류가 발생할 수 있습니다 (예: package.json의 type: "module").

webpack-cli는 CommonJS 및 ESM 형식의 설정을 모두 지원하며, 처음에는 require()를 사용하여 설정을 로드하려고 시도합니다. 일단 실패하면 'ERR_REQUIRE_ESM' (이 경우의 특수한 코드) import()를 사용하여 설정 로드를 시도합니다. 그러나, import() 메소드는 loader 훅이 활성화되어 있지 않으면 ts-node에서 작동하지 않습니다. (TypeStrong/ts-node#1007에 설명되어 있습니다).

위의 오류를 수정하려면 다음 명령을 사용하세요.

NODE_OPTIONS="--loader ts-node/esm" npx webpack --entry ./src/index.js --mode production

자세한 내용은 TypeScriptë¡œ webpack 설정 작성에 대한 문서를 참고하세요.