하나의 HTML 문서를 구성하는 콘텐츠는 다양합니다.단순한 마크업 텍스트 뿐만 아니라, css와 폰트 그리고 이미지가 가득합니다.그런데 현대 웹은 더이상 단순한 “페이지”가 아닙니다.콘텐츠가 많은 만큼 사용자 경험을 개선하기 위해 비동기 처리를 하고, 상태를 빠르게 업데이트를 해야 하기 때문입니다.코드가 점점 복잡해지는 문제를 해결하기 위해, 프론트엔드는 공통되는 로직을 추상화하고 분리하는 사고를 코드에 적용하게 되었습니다.즉 모듈화한 것이죠.이는 재사용성을 추구하는 개발자의 입장에서 매우 편리한 해결 방법입니다.하지만 이렇게 많아진 파일을 HTML의 나 를 작성해서 일일이 받아오기에는 문제가 많습니다.css나 js 파일 간 의존성(import)이 있다면 로드 순서를 보장하기 어렵습니다.브라우저는 각 파..

도대체 이게 왜 갑자기 뜨기 시작했는지 모르겠다. 똑같은 boilerplate를 사용했어도 여태 이런 에러는 뜨지 않았었는데. 내가 설치한 npm 패키지가 꼬인 것인지, 오타가 있는 것은 아닌지 한참 헤매다가 github.com/webpack/webpack/issues/4899 여기서 해답을 얻었다. webpack.config.js에서 정의한 config 객체 안에 다음을 추가하면 된다. devtool: "source-map"

웹팩을 자유자재로 활용하기 위해 노력하고 있다만, 역시 오늘도 사투를 벌였다. 👊 내가 하려던 것 : extract-text-webpack-plugin을 사용하여 수많은 scss를 단 하나의 styles.css로 압축시키기 그런데 이 포스팅의 제목과 같은 에러가 떴다. 내가 오타를 낸건지, 다른 라이브러리 버전을 잘못받은건지 한참 동안 디버깅했다. 그러다가 제작자 깃헙 레포에서 원인을 발견했다(진작 제작자의 충고를 들을걸) ❗️ 원인 : extract-text-webpack-plugin은 css 용으로 쓰여서는 안되므로, mini-css-extract-plugin을 사용해야 했던 것이다. 💖 해결 : 기존에 쓰던 extract~를 mini~로 변경했고, 다음과 같이 webpack.config.js를 수정..