Error: Cannot find module ‘webpack-cli/bin/config-yargs’

최근 webpack에 대해서 다시 공부하던중 webpack-dev-server 동작이 잘 안된다.. 인터넷을 열심히 뒤져도 역시나 잘 나오지 않는다.

그래서 열받아서 내가 해결한 OSS 사용시 문제점들을 이곳에 공유하려고 합니다. 누군가에게는 도움이 되길 기대하며..

webpack이 v5로 업데이트되고 webpack-cli와 버전이 꼬이면서 발생한 문제인데 webpack-cli와 webpack-dev-server 버전을 낮춰서 해결하였습니다.

package.json에 아래와 같이 버전을 명시합니다.

“webpack”: “5.5.0”,
“webpack-cli”: “3.3.11”,
“webpack-dev-server”: “3.7.1”

만약 webpack 관련 라이브러리를 global로 선언하였다면 아래와같이 버전을 다운그레이드 해야합니다.

$ npm i -g webpack-cli@3.3.11

빌드 할때는 package-lock.json 파일과 node_modules 폴더를 삭제하고 모듈을 재설치 하는 것이 좋습니다.

$ npm cache clean (--force) // cache clean command
$ rm -rf node_modules // node_modules 폴더삭제
$ rm package-lock.json // package.json 파일삭제
$ npm install // 노드모듈 인스톨

자.. 이제 package scripts를 실행해서 webpack-dev-server가 제대로 동작하는지 확인합니다.

package.json scripts 설정

{
  ...
  "scripts": {
    "dev": "webpack-dev-server",
    ...
},

webpack.config.js 설정

module.exports = {
  ...
  devServer: {
    port: 3000,
    // open: 'Google Chrome'
},

npm run 실행

$ npm run dev

실행 후 console log

webpack v5에서 webpack-dev-server 실행 명령어가 webpack serve로 바뀌었는데

위처럼 기존 방법을 고집하지 않는다면 아래와 같이 선언해서 사용하는게 좋습니다. (최신 버전 모듈 사용방법)

노드 모듈 최신버전으로 설치

$ npm i webpack webpack-cli webpack-dev-server -D

package.json scripts 추가

"scripts": {
   "dev": "webpack serve" // webpack v5에서 serve로 변경됨
}

webpack.config.js는 위와 동일하게 설정 후 아래 커맨드 실행

$ npm run dev

webpack devserver 가이드: https://webpack.js.org/configuration/dev-server/