Sign in

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

webpack error
webpack error

최근 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-dev-server console
webpack-dev-server console

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
Image for post
Image for post

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store