webpack.config.js 파일에 설정들을 추가 해 볼건데, 설정의 큰 흐름은 entry -> module -> output 이다. "entry( 압축할 파일들 )에 module( 규칙들 )을 적용시켜 output( 결과 파일을 어디에 어떻게 저장할 지) 으로 출력한다"의 흐름으로 이해하면 된다. 1. 기본 설정 name - 설정 파일 이름을 지어주면되는데 이 설정에 대한 목적을 간단하게 적어주면 된다. mode - 개발모드냐 배포모드냐를 말하는데, 개발 중엔 'development' , 배포 시엔 'production'으로 설정해주면 된다. 배포 모드로 변경 후 빌드를 하면 소스코드 압축 및 최적화가 진행된다. devtool - 소스맵을 생성할 지 말지 그리고 어떻게 생성할 것인지를 설정한다. 여..

1. webpack은 왜 쓰는 걸까. 개발을 하다보면, 하나의 파일 안에 코드가 너무 길어 질 경우 여러 파일로 나눠 import 해서 쓰기도 하고, 그러다 보면 자연스레 컴포넌트나 js파일 css파일 등--이 굉장히 많이 생겨나는 걸 볼 수 있다. 또 그 중 몇몇 파일은 안 쓰이게 되는 경우도 있고, 코드 내에 console.log 처럼 개발할 때만 사용하는 서비스에 불필요한 코드도 생기기 마련인데, 그런 것들을 미처 신경쓰지 못하는 경우가 부지기수이다. 웹팩은 이런 문제들을, 불필요한 코드는 제거하고 많아진 파일들 중 내가 원하는 파일들만 모아서 하나의 js파일로 병합해 줌으로써 해결한다. 그리고 이 합쳐진 파일은 index.html 파일에서 아래와 같은 코드 한 줄로 로딩 되어 화면에 뿌려진다. 뭐..