Configuration

기본적으로 webpack은 설정 파일을 사용할 필요가 없습니다. webpack은 프로젝트의 엔트리 포인트를 src/index.js으로 가정하고, 프로덕션을 위해 압축하고 최적화된 결과를 dist/main.js로 내보냅니다.

보통 프로젝트는 이 기능을 확장해야 합니다. 루트 폴더에 webpack.config.js 파일을 생성하면 webpack이 자동으로 이 파일을 사용합니다.

사용 가능한 모든 설정 옵션을 아래에서 설명하고 있습니다.

Use a different configuration file

특정 상황에 따라 다른 설정 파일을 사용하려면 커맨드라인에서 --config 플래그를 사용하여 이를 변경할 수 있습니다.

package.json

"scripts": {
  "build": "webpack --config prod.config.js"
}

Options

자세한 문서로 이동하려면 아래 설정 코드에서 각 옵션의 이름을 클릭하세요. 또한, 화살표가 있는 항목은 더 많은 예제를 보여주고 경우에 따라 사용할 수 있는 고급 설정을 표시 할 수 있습니다.

webpack.config.js

webpack-cli의 init 명령을 사용하여 프로젝트 요구사항에 맞춘 webpack 설정 파일을 빠르게 생성할 수 있습니다. 설정 파일을 만들기 전에 몇 가지 질문을 할 것입니다.

npx webpack-cli init

npx는 @webpack-cli/init가 아직 프로젝트에 설치되지 않았거나 전역으로 설치되지 않은 경우 설치하라는 메시지를 표시 할 수 있습니다. 설정 생성 중에 선택한 사항에 따라 프로젝트에 추가 패키지를 설치할 수도 있습니다.

npx webpack-cli init

ℹ INFO For more information and a detailed description of each question, have a look at https://github.com/webpack/webpack-cli/blob/master/INIT.md
ℹ INFO Alternatively, run `webpack(-cli) --help` for usage info.

? Will your application have multiple bundles? No
? Which module will be the first to enter the application? [default: ./src/index]
? Which folder will your generated bundles be in? [default: dist]:
? Will you be using ES2015? Yes
? Will you use one of the below CSS solutions? No

+ babel-plugin-syntax-dynamic-import@6.18.0
+ uglifyjs-webpack-plugin@2.0.1
+ webpack-cli@3.2.3
+ @babel/core@7.2.2
+ babel-loader@8.0.4
+ @babel/preset-env@7.1.0
+ webpack@4.29.3
added 124 packages from 39 contributors, updated 4 packages and audited 25221 packages in 7.463s
found 0 vulnerabilities


Congratulations! Your new webpack configuration file has been created!

16 Contributors

sokraskipjackgrgurbondzsriccterinjokesmattcekbariotissterlingvixjeremenichellidasarianudeeplukasgeiterEugeneHlushkobigdawggianshumanvtextbook

Translators