entry, output, mode 이 세가지 옵션은 번들링 시 필수적으로 설정해야합니다.
npx webpack —help 를 통해 옵션들의 쓰임에 대해 알아봅시다.
- -entry <value...> : 모듈의 시작점을 설정합니다. webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용해야 하는 모듈입니다. 엔트리 포인트가 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아냅니다.
- -o, --output-path <value> : 웹팩으로 생성되는 파일의 위치를 설정합니다.
- —mode : 번들링 모드를 결정합니다. Development 모드와 production 모드가 있으며 Production 모드의 경우 코드를 최적화하여 용량을 줄입니다.
우선 모듈 문법으로 간단한 코드를 구현해보고
웹팩의 entry, output 설정으로 다시 구현해보겠습니다.
npx webpack --mode development --entry ./src/app.js -o ./dist
명령문이 너무 길죠? 매번 이렇게 작성하기는 번거로우니 웹팩 설정 파일을 통해 간편하게 만들어보겠습니다.
webpack.config.js 파일을 작성 후 package.json 파일을 수정해야합니다. ("build": "webpack")
이렇게 코드를 수정하고 npm run build 를 실행하면 npm 이 자동으로 webpack의 webpack.config.js 파일을 참고하여 코드를 실행시킵니다.