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에는 방대한 옵션 세트가 있습니다. 프로젝트 요구사항에 대한 webpack 설정 파일을 빠르게 생성할 수 있는 webpack-cli'의 init 명령어를 활용하세요. 설정 파일을 만들기 전에 몇 가지 질문을 할 것입니다.

npx webpack init

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

$ npx webpack init

[webpack-cli] For using this command you need to install: '@webpack-cli/generators' package.
[webpack-cli] Would you like to install '@webpack-cli/generators' package? (That will run 'npm install -D @webpack-cli/generators') (Y/n)
devDependencies:
+ @webpack-cli/generators 2.5.0
? Which of the following JS solutions do you want to use? ES6
? 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
? Do you like to install prettier to format generated configuration? Yes
? Pick a package manager: pnpm
[webpack-cli] ℹ INFO  Initialising project...

devDependencies:
+ @babel/core 7.19.3
+ @babel/preset-env 7.19.4
+ autoprefixer 10.4.12
+ babel-loader 8.2.5
+ css-loader 6.7.1
+ html-webpack-plugin 5.5.0
+ mini-css-extract-plugin 2.6.1
+ postcss 8.4.17
+ postcss-loader 7.0.1
+ prettier 2.7.1
+ style-loader 3.3.1
+ webpack-dev-server 4.11.1
[webpack-cli] Project has been initialised with webpack!