webpack (2)

지난번 포스팅에서 나는 webpack을 설치하고 실습해보면서 익히려하였지만, 이미 나는 create-react-app을 통해 webpack을 나도 모르게 사용중이었다. 이미 webpack이 사용되고 있는 환경에서 webpack을 설치하며 실습을 진행하니 에러가 발생하였다. 그래서 다시 아무것도 설치가 안 된 새로운 개발환경을 create-react-app으로 만들었고 실습해보았다.

    npm run eject

를 통해 그동안 감춰졌었던 webpack과 babel의 설정을 볼 수있다.

벌써부터 멘붕이 온다. 나는 그동안 빙산의 일각을 봐왔던 것인가. create-react-app이 없었다면 프론트 엔드에 취직하는 건 꿈도 못꿨을 것이다. 설치된 패키지를 보면 babel, webpack이 있는걸 확인할 수 있다. 그러면 webpack.config.js는 어디있을까?

이것 또한 package.json 못지 않게 설정이 많은 걸 확인할 수 있다. 양이 많긴 하지만 require로 가져온 것들을 일일이 확인해보면서 이해하려고 노력하면 이해하지 못할 수준은 아니다. 이곳에서 코드를 수정하면 webpack의 설정을 직접 변경할 수 있을 것이다. babel-loader도 js파일에 사용되도록 설정이 되어있다.

그러나 보통 babel을 사용하면 root폴더에서 볼 수 있는 .babelrc 파일을 찾아볼 수가 없는데 아무래도 create-react-app은 .babelrc에 명시할 내용은 package.json에 명시해두었기에 굳이 파일을 생성하도록 하지 않은 것 같다.

위의 사진처럼 package.json에 이미 설정이 되어있다. package.json과 .babelrc에 babel config을 명시하는 방식의 차이를 모르겠지만, create-react-app으로 프로젝트를 생성하였을 경우, .babelrc를 생성한다고 해서 설정이 적용되지 않는다.

이유는 webpack.config.js에서 설정이 false로 되어있기 때문이다. 이를 해결하기 위해선 react-app-rewired를 사용한다고 한다. 자세한 내용은 구글링으로 찾아보자.

오늘도 수고했어용.