Command Line Interface

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

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

Commands

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

명령어	사용법	설명
build	build|bundle|b [entries...] [options]	webpack을 실행합니다. (기본 명령어, 생략 가능).
configtest	configtest|t [config-path]	webpack 설정을 검증합니다.
help	help|h [command] [option]	명령어 및 옵션에 대한 도움말을 표시합니다.
info	info|i [options]	시스템 정보를 출력합니다.
init	init|create|c|new|n [generation-path] [options]	새로운 webpack 프로젝트를 초기화합니다.
loader	loader|l [output-path] [options]	로더를 스캐폴드합니다.
plugin	plugin|p [output-path] [options]	플러그인을 스캐폴드합니다.
serve	serve|server|s [options]	webpack-dev-server를 실행합니다.
version	version|v [commands...]	webpack, webpack-cli 및 webpack-dev-server의 버전 넘버를 출력합니다.
watch	watch|w [entries...] [options]	webpack을 실행하고 파일 변경을 감지합니다.

Build

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

npx webpack build [options]

example

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

Init

새 webpack 프로젝트를 초기화하기 위해 사용합니다.

npx webpack init [generation-path] [options]

예시

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

Generation Path

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

Options

-t, --template

string = 'default'

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

-f, --force

boolean

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

Loader

로더를 스캐폴드합니다.

npx webpack loader [output-path] [options]

example

npx webpack loader ./my-loader --template=default

Output Path

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

Options

-t, --template

string = 'default'

템플릿의 유형입니다.

Plugin

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

npx webpack plugin [output-path] [options]

example

npx webpack 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은 다음 플래그와 함께 제공됩니다.

플래그 / 별칭	타입	설명
--entry	string[]	애플리케이션의 엔트리 포인트입니다. (예: ./src/main.js)
--config, -c	string[]	webpack 설정 파일의 경로를 제공합니다. (예: ./webpack.config.js)
--config-name	string[]	사용할 설정의 이름입니다.
--name	string	사용할 설정의 이름. 복수의 설정을 로드할 때 사용합니다.
--color	boolean	콘솔에서 색상 활성화
--merge, -m	boolean	webpack-merge를 사용하여 둘 이상의 구성을 병합합니다.
--env	string[]	함수일 때 설정에 전달된 환경입니다.
--define-process-env-node-env	string	process.env.NODE_ENV를 지정된 값으로 설정합니다.
--progress	boolean, string	빌드 중 컴파일 진행률을 출력합니다.
--help	boolean	지원되는 플래그 및 명령 목록을 출력합니다.
--output-path, -o	string	webpack에 의해 생성된 파일의 출력 위치입니다. (예: ./dist)
--target, -t	string[]	빌드 대상을 설정합니다.
--watch, -w	boolean	파일 변경 사항을 확인합니다.
--watch-options-stdin	boolean	stdin 스트림이 종료되면 감시를 중단합니다.
--devtool, -d	string	소스 맵 생성 여부와 방법을 제어합니다.
--json, -j	boolean, string	결과를 JSON으로 출력하거나 파일으로 저장합니다.
--mode	string	webpack에 전달할 모드를 정의합니다.
--version, -v	boolean	현재 버전을 가져옵니다.
--stats	boolean, string	webpack에 통계 처리 방법을 지시합니다.
--disable-interpret	boolean	설정 파일을 로드할 때 해석을 사용하지 않도록 설정합니다.
--fail-on-warnings	boolean	webpack의 경고에서 0이 아닌 종료 코드로 webpack-cli 프로세스를 중지합니다.
--analyze	boolean	번들 정보를 얻기 위해 webpack-bundle-analyzer 플러그인을 호출합니다.
--extends, -e	string[]	기존 설정을 확장합니다.

Negated Flags

플래그	설명
--no-color	콘솔에서 모든 색상을 비활성화합니다.
--no-hot	설정을 통해 활성화한 경우 핫 리로딩을 비활성화합니다.
--no-stats	webpack에서 내보낸 컴파일 통계를 비활성화합니다.
--no-watch	파일 변경을 감시하지 않습니다.
--no-devtool	소스 맵을 생성하지 않습니다.
--no-watch-options-stdin	stdin 스트림이 종료되어도 감시를 중단하지 않습니다.

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

webpack-cli v5.1.0+

--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 인수는 복수의 값을 허용합니다.

호출	결과 환경
npx webpack --env prod	{ prod: true }
npx webpack --env prod --env min	{ prod: true, min: true }
npx webpack --env platform=app --env production	{ platform: "app", production: true }
npx webpack --env foo=bar=app	{ foo: "bar=app"}
npx webpack --env app.platform="staging" --env app.name="test"	{ app: { platform: "staging", name: "test" }

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

환경 변수	설명
WEBPACK_SERVE	serve|server|s를 사용하고 있으면 true
WEBPACK_BUILD	build|bundle|b를 사용하고 있으면 true
WEBPACK_WATCH	--watch|watch|w를 사용하고 있으면 true

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

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'

define-process-env-node-env

webpack-cli v5+의 경우.

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

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

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

설정이 함수를 내보내는 경우 함수가 반환된 후 --define-process-env-node-env 값이 mode에 할당됩니다. 즉, mode는 함수 인수(env 및 argv)에서 사용할 수 없습니다. 그러나 --define-process-env-node-env의 값은 argv.nodeEnv로 접근할 수 있으며 그에 따라 사용할 수 있습니다.

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

Configuration Options

파라미터	설명	입력 타입	기본값
--config	설정 파일 경로	string[]	Default Configs
--config-name	사용할 설정의 이름	string[]	-
--env	함수일 때 설정에 전달된 환경	string[]	-

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

종료 코드	설명
0	성공
1	webpack 오류
2	설정 / 옵션 문제 또는 내부 오류

CLI Environment Variables

환경 변수	설명
WEBPACK_CLI_SKIP_IMPORT_LOCAL	true이면 webpack-cli의 로컬 인스턴스 사용을 건너뜁니다.
WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG	true이면 ESM 설정을 강제로 로드합니다.
WEBPACK_PACKAGE	CLI에서 사용자 정의 webpack 버전을 사용합니다.
WEBPACK_DEV_SERVER_PACKAGE	CLI에서 사용자 정의 webpack-dev-server 버전을 사용합니다.
WEBPACK_CLI_HELP_WIDTH	도움말 출력에 사용자 정의 너비를 사용합니다.

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 설정 작성에 대한 문서를 참고하세요.