에러발생 이유
웹팩의 모든 파일은 모듈화되서 번들링화되어있고, 서로가 의존성을 띄게 됩니다.
하지만 웹팩에 묶여있는 각각의 모듈은 실제로는 각자의 개발팀에서 개발을 하게됩니다.
webpack과 webpack-devserver라는 파일은 이름은 비슷해보이지만 다른 개발팀에서 개발을 하게되고
시간이 흐른다면 결론적으로 버전관리의 속도나 방식이 달라지게 됩니다.
예를들어 웹팩 개발속도가 데브서버보다 훨씬 빨라 버전업이 여러번 이뤄지고 버전이 5.0.1정도에 이르게되면 버전 4번대의 웹팩 데브서버랑 호환성 문제가 발생하게 됩니다.
이게 웹팩을 처음 번들링을 하고 서버를 가동했을 때 Error: Cannot find module 'webpack/bin/config-yargs' 라는 에러메시지가 뜨는 기본 원리입니다.
해결법
주로 충돌이 발생하는 webpack, webpack-devserver, webpack-cli 이 세 개의 패키지들의
버전을 호환이 되는 버전들로만 설치해 주셔야합니다
초기에 npm install webpack@4.43.0 처럼 정확한 버전을 명시하면 npm이 해당 버전을 찾아 설치해줍니다. 혹은 package.json에서 버전을 필요한 버전으로 수정한 뒤 재설치를 하시면 덮어쓰기가 이뤄집니다.그럼 정확히 버전을 어떻게 맞추는 방법은 무엇일까요?
결론적으로 말하면 저는 모릅니다. 다만 호환이되는 버전들을 일부 알고있을 뿐이죠.
이런 문제를 피하기 위해서 대부분의 개발자들은 webpack-cli를 이용해 버전을 자동조절해서 쓰곤합니다.
하지만 굳이 cli를 사용하지말고 웹팩 초기설정을 하고싶다면 제가 설치한 버전을 쓰시면 호환문제가 발생하지 않을 겁니다.
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"