[Error - webpack-dev-server ] Cannot find module 'webpack-cli/bin/config-yargs'

Webpack를 통해 번들링된 HTML을 바로 확인할 수 있도록 webpack-dev-server를 통해 커맨드를 실행시키려는 도중 다음과 같은 오류와 맞닥뜨렸다.

 

Fig. 1. webpack-dev-server Error

 

검색 결과, Webpack과 해당 패키지의 버전 차이로 인해서 발생하는 오류라고 하였지만, 해결이 되지 않아 고민하던 도중 다음과 같은 글을 발견하였다.

 

https://stackoverflow.com/questions/40379139/cannot-find-module-webpack-bin-config-yargs

Cannot find module 'webpack/bin/config-yargs'

 

나와 동일한 오류를 겪고 있었는데, 이에 대한 해결 방안을 찾았다!

 

이유는 바로 Webpack 5와 Webpack CLI 4버전을 사용 시에는 사용해야하는 커맨드가 달랐다.

실행하려면 다음과 같은 커맨드를 통해 실행해야 한다.

webpack serve [필요한 옵션 나열]

나의 경우에는 개발 전용 webpack config를 두었기 때문에 다음 커맨드로 실행에 성공하였다.

webpack에서 Defalult로 실행시키려는 Config와 다른 파일일 경우 --config 옵션을 통해 Config로 지정할 파일을 명시해준 후 실행시키면 아주 잘 동작한다. 

webpack server --config webpack.dev.config.js

 

Fig. 2. 실행 결과

별건 아니었지만 해결하니 기부니가 조타.