웹팩 설치

웹팩을 사용하기 위해 먼저 프로젝트에 웹팩을 설치해야 된다.
npm을 사용하여 웹팩과 웹팩 CLI를 설치한다.

npm install webpack webpack-cli --save-dev

• webpack 웹팩 모듈 번들러 라이브러리
• webpack-cli 웹팩 명령행 도구

package.json

"devDependencies": {
  "webpack": "^5.90.0",
  "webpack-cli": "^5.1.4"
}

---

간단한 웹팩 설정 작성

1. 웹팩 설정 파일 추가

웹팩 설정 파일(webpack.config.js)을 생성하여 간단한 설정을 추가한다.
webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',    // 엔트리 포인트 설정
  output: {
    filename: 'bundle.js',    // 번들된 결과물의 이름 및 경로 설정
    path: path.resolve(__dirname, 'dist'),
  },
};

2. 기본 설정 옵션

1) entry

웹팩이 빌드 프로세스를 시작할 파일의 경로를 지정한다.
src/index.js 파일을 엔트리 포인트로 설정하였다.

2) output

빌드된 결과물의 이름과 경로를 설정한다.
bundle.js 파일을 dist 폴더에 생성하도록 설정했다.

3. 프로젝트 빌드 스크립트```

코드를 입력하세요

### 1) 빌드 스트립트 수정
`package.json` 파일의 스크립트 부분을 수정하여 빌드 명령을 간편하게 사용할 수 있도록 한다.

_package.json_
```js
"scripts": {
  "build": "webpack"
}

2) 빌드 명령어

프로젝트를 빌드하려면 다음 명령어를 사용할 수 있다.

npm run build

이 명령은 웹팩을 실행하여 설정된 엔트리 포인트부터 의존성을 분석하고, 번들된 결과물을 생성한다.

이제 웹팩이 설치되고 시본 설정이 작성된 상태에서 프로젝트를 빌드할 수 있게 되었다. 빌드된 결과물은 설정된 경로에 생성되며, 이를 통해 웹팩이 어떻게 동작하는지 간단하게 확인할 수 있다.