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"
}

Set up a new webpack project

Webpack에는 너무 많은 옵션이 있어서 어려울 수 있습니다. 버전 v6.0.0부터 제공되는 webpack-cli의 새로운 도구create-new-webpack-app를 활용하세요. 이 도구를 사용하면 프로젝트 요구 사항에 맞는 특정 구성 파일로 Webpack 애플리케이션을 빠르게 생성할 수 있습니다. 설정 파일을 만들기 전에 몇 가지 질문을 할 것입니다.

npx create-new-webpack-app [command] [options]

npx는 프로젝트 또는 전역에 create-new-webpack-app이 아직 설치되지 않은 경우 설치를 요청할 수 있습니다. 또한 새 webpack 애플리케이션 생성 과정에서 선택한 사항에 따라 프로젝트에 추가 패키지가 설치될 수도 있습니다.

$ npx create-new-webpack-app init

Need to install the following packages:
create-new-webpack-app@1.1.1
Ok to proceed? (y)

? Which of the following JS solutions do you want to use? Typescript
? Do you want to use webpack-dev-server? Yes
? Do you want to simplify the creation of HTML files for your bundle? Yes
? Do you want to add PWA support? No
? Which of the following CSS solutions do you want to use? CSS only
? Will you be using PostCSS in your project? Yes
? Do you want to extract CSS for every file? Only for Production
? Which package manager do you want to use? npm
[create-webpack] ℹ️ Initializing a new Webpack project
...
...
...
[create-webpack] ✅ Project dependencies installed successfully!
[create-webpack] ✅ Project has been initialised with webpack!