엔트리 포인트 설정

웹팩에서 엔트리 포인트(entry point)는 빌드 프로세스를 시작하는 지점으로, 의존성 그래프의 시작점이다. 엔트리포인트를 설정하는 방법은 웹팩 설정 파일에서 entry 속성을 사용하는 것이다.

webpack.config.js

module.exports = {
	entry: './src/index.js',
	//그밖에 다른 옵션...
}

./src/index.js는 엔트리 포인트로 설정된 파일의 경로이다. 이 파일에서 웹팩은 의존성 그래프를 시작하여 프로젝트의 모든 모듈을 찾고 묶어내게 된다.

번들된 결과물의 아웃풋 설정

아웃풋(output)은 웹팩이 빌드한 결과물이 저장될 위치와 파일명을 지정하는 부분이다. output속성을 사용하여 아웃풋을 설정한다.

webpack.config.js

const path = require('path');

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
  	//그밖에 다른 옵션...
}

• filename
  빌드된 결과물의 파일명을 지정한다.
• path
  빌드된 결과물이 저장될 경로를 지정한다.
• path.resolve(__dirname, 'dist')
  현재 프로젝트의 루트 디렉토리에 있는 dist 폴더를 의미한다.

이렇게 설정된 엔트리 포인트와 아웃풋을 통해 웹팩은 의존성 그래프를 만들고, 빌드된 결과물을 dist 폴더의 bundle.js 파일로 저장한다. 설정 파일의 나머지 부분에는 로더, 플러그인, 모드 등을 추가하여 더 다양한 기능을 설정할 수 있다.