우당탕탕 Webpack 사용기

해당 카테고리에는 조각글로 그날 그날 작게나마 알게 된 이야기들을 적을 예정입니다.

개인 노션에 적는 방법이 있겠지만 기록 채널을 하나로 통일하고 싶어서 새로운 카테고리를 열었습니다.

오늘의 주제 : Webpack으로 코드 번들링 시, css가 문제다!

문제 상황과 배경

배경

• 여태 webpack이 번들링팩임을 잠시 망각하고 webpack에서 제공하는 webpack-dev-server를 사용해서 프론트엔드 프로그램을 개발하고 있었음
• Python으로 이루어진 코드를 불러와서 쓰고 싶어서 FastAPI를 사용하기로 결정
• node.js에서 express.js를 쓰고 Python에서는 uvicorn.py를 써서 서버 구성을 할 예정
• 원래 npm, webpack.config.js와 package.json에 의존하던 빈약한 구조를 변경

상황

문제 : express.js 서버 온, uvicorn.py 서버 온, index.html의 css 낫 온

• webpack 쪽 문제일 거라 생각해서 webpack.config.js랑 package.json 교차 검증했는데 바뀌는 것이 없었다...!

해결 과정

체크리스트

1. (제일 많이 얘기하지만) webpack.config.js의 css-loader 설정했나요? (당연히 프로젝트 구성할 때 부터 했었다)
2. webpack.config.js 내 output 설정의 path와 publicPath 설정을 잘 했나요? (여기도 문제 없음)
3. webpack.config.js 내 plugins의 HtmlWebpackPlugin 설정 내 template가 가리키는 정적 템플릿(index.html) 위치 잘 설정했나요? (확인)
4. index.html내에서 style 설정 시 상대 경로로 url 설정한거 제대로 해당 위치 가리키는지 확인했나요? <- 이게 문제
5. 4가 안된다면 일단 webpack 진입 모듈에서(index.js) 최상단에 직접 css 파일 import 했나요? <- 이게 해답

Visual Studio Code의 자동 완성 기능을 너무 믿었던 죄였다. 이 자동 완성 기능으로는 webpack 사용 시 js만 검색되고 css는 검색되지 않으나, 참조는 잘 되기 때문에 걱정할 필요가 없다.

짤막한 후기

Visual Studio Code를 너무 많이 믿은 죄~~
번외로 Webpack 사용 시 정적 파일을 어떻게 관리할까가 설계시 고려해야 할 중요 포인트.