요번 한달짜리 프로젝트는 기존에 명령어 하나로 손쉽게 환경설정 구축이 되는 CRA 방식이 아닌,
직접 Webpack으로 개발환경을 세팅하기로 결심했다.
webpack을 최종때 사용하게된 이유
webpack에 대한 동작원리도 궁금했고, react에서 index.html 파일이 어떻게 동작되는지 하나하나 알고 싶어서 CRA가 아닌 webpack 초기설정 후 프로젝트를 진행하는 방식을 택했다.
하지만, webpack 초기설정을 하는과정에서 두번의 에러가 발생했다.
아래는 두개의 에러고 해결과정이다.
첫번째 에러
webpack.config.js 모듈에서 모듈에 babel-loader 설정 과정에서 난 에러이다.
Module build failed (from ./node_modules/babel-loader/lib/index.js):원인
bable-core와 babel-loader의 요구 버전이 맞지 않아서 생긴 에러이다.
babel-lodaer 버전8이면 babel-core는 7버전을 , babel-lodaer 버전이 6이면
babel-core는 6버전을 사용하면 되는것 같다.
해결
npm uninstall babel-core 로 패키지를 삭제 후 npm install babel-core@7.20.12 으로 재설치 하니까 에러가 사라졌다.
두번째 에러
babel 세팅 후 웹을 실행 했는데 아래와 같은 에러가 떴다. ts-loader? 뭐가 문제였을까
ERROR in ./src/app-chat.tsx
Module build failed (from ./node_modules/ts-loader/index.js)원인
babel은 최신 es6 문법을 es5이전의 문법으로 변환해주는 트랜스 컴파일러 패키지이다.
그리고 ts 에서 제공하는 tsconfig.json파일 내에서 target또한 해당 es버전으로 트랜스컴파일 해줄수있다. 여기서 noEmit 프로퍼티 값을 true 설정 시 결과 파일을 내보낸다는 의미이다.
요약하자면, webpackconfig에서 바벨로 트랜스파일된 결과파일과 tsconfig에서 noEmit 속성이 겹쳐서 충돌로 에러가 난것으로 여겨진다.
해결
너무 간단했다. tsconfig.json 파일에 있는 noEmit 속성값을 false로 변경하면 해결된다.
"noEmit": false /* 결과 파일 내보낼지 여부 */,[webpack template 레포]
