Webpack 사용법 전반

• 여러 파일들을 한데 모아놓은, 빌드의 타겟이 되는 경로의 파일을 '엔트리' 파일이라고 한다.
• 엔트리 파일을 통해 만들어낸 번들링 결과물이 저장되는 경로의 파일을 '아웃풋'이라고 한다.
• webpack.config.js 에 웹팩 번들링에 필요한 명령어의 설정들을 담을 수 있다.
• 여기 담으면 npx webpack 명령어 만으로 번들링을 진행할 수 있다.

 

Webpack 모드

 

1. 개발자 모드
2. 배포 모드
3. 아무것도 설정하지 않은 모드(기본값)

당연하지만, 웹팩의 설정들은 너무 많아서, 개발자가 일일히 모두를 설정하기에는 어려움이 많습니다. 그래서 웹팩은 '설정 모음'의 차원에서 모드를 지원합니다. 모드를 설정해주면 자동으로 그 모드에 해당되는 설정들이 적용되어 번들링이 처리됩니다.

 

설정 파일 자체를 webpack.confing.prod.js 이런 식으로 여러 개 만들어서 --config 옵션을 준채로 웹팩 번들링을 수행할 수도 있습니다.

 

Webpack 로더

로더란, 자바스크립트가 아닌 것 또한 번들링에 포함시키는데 활용되는 툴입니다. 웹팩을 잘한다는 것은 결국 로더를 얼마나 많이 알고 있으며 잘 쓰는가를 의미하는 것이기도 합니다. 보통 일반적인 프로젝트에서 자바스크립트 외의 파일을 asset으로 통칭해서 부릅니다. CSS 를 번들링에 포함시키기 위해서는 css-loader가 활용되며, 다른 파일들 또한 ***-loader 를 설치해서 활용해야 합니다.