webpack을 이용한 개발 환경 설정 중 막혔던 부분

개발 환경 설정

cra를 사용하지 않고 직접 webpack을 이용해 개발 환경을 구축해보려다 많은 삽질을 했다. 필요한 것들은 다음과 같았다.

• eslint와 프리티어
• 라우터
• antd
• 통신모듈(fetch, axios 등)

이해가 없는 상태에서 디렉토리 구조를 만드는 것부터 시작하려니 헷갈리는 부분이 많았다.
필요한 것들을 설치 & webpack.config.js에 설정하며 여러가지 애를 먹은 부분이 있었지만, 대부분 검색을 통해 해결할 수 있었다.

그중 가장 기억에 남는 것을 기록해두려고 한다.

antd css파일을 불러오지 못하는 문제..!

ERROR in ./node_modules/antd/dist/antd.css 15:5
Module parse failed: Unexpected token (15:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* stylelint-disable at-rule-no-unknown */
| html,
> body {
|   width: 100%;
|   height: 100%;
 @ ./src/components/AppLayout.js 21:0-28
 @ ./src/main.js
 @ multi ./src/main.js

저 위치로 가보면 분명 파일이 존재하는데, 불러오질 못하고 에러가 났다.
도저히 원인을 못 찾다가,
웹팩에 css 로더 설정이 잘못 되어있었다는 것을 발견했다.