인프런 커뮤니티 질문&답변

chul kim님의 프로필 이미지
chul kim

작성한 질문수

React & Express 를 이용한 웹 어플리케이션 개발하기

React Project 만들기 | NPM, WEBPACK

요새 이 강의를 보시는 분께..webpack.config.js에 관해서

작성

·

613

4

저는 이 강의대로 진행하고 npm run dev-server 명령어를 치면 에러가 발생했었습니다.

이런 경우에는 npm install webpack-cli --save 를 해주시고

webpack.config.js 에서 module 안에 loaders 를 rules 로 변경해주시면 정상적으로 실행이 가능합니다.

도움이 되셨으면 좋겠습니다.

감사합니다.

답변 7

1

이외에도 babel 을 es2015에서 7로 변경해야 합니다. 구글링해서 해보셔야 할 것 같아요...

0

윗분들 댓글보고 해결해서 정리해봅니다.
1. 강의대로 진행중 npm run dev-server 실행 시
cannot find module webpack-cli 에러 발생

2.  npm install webpack-cli --save 실행
3. package.json

"devDependencies": {

    "@babel/core": "^7.13.16",

    "@babel/plugin-proposal-class-properties": "^7.10.4",

    "@babel/preset-env": "^7.13.15",

    "@babel/preset-react": "^7.13.13",

    "babel-core": "^6.26.3",

    "babel-loader": "^8.2.2",

    "babel-preset-es2015": "^6.24.1",

    "babel-preset-react": "^6.24.1",

    "webpack": "^4.46.0",

    "webpack-cli": "^3.3.12",

    "webpack-dev-server": "^3.11.2"

  },
4. webpack.config.js

module: {

       rules: [ 

          {

              test: /\.jsx?$/,

              loader: 'babel-loader',

               exclude: /node_modules/,

               query: {

                   cacheDirectory: true,

                   presets: ['@babel/preset-env', '@babel/preset-react']

               }

           }

       ]

   },
5. npm run dev-server 실행 시
cannot find module @babel/core 에러 발생
-> npm install --save-dev @babel/core
6. 다시 npm run dev-server 실행 시
5번과 비슷한 에러 발생(총 3번인가 발생)
5번 해결방법과 같이 모듈 설치

전 이렇게 해결했습니다.

0

"devDependencies": {

    "@babel/core": "^7.11.1",

    "@babel/plugin-proposal-class-properties": "^7.10.4",

    "@babel/preset-env": "^7.11.0",

    "@babel/preset-react": "^7.10.4",

    "babel-loader": "^8.1.0",

    "webpack": "^4.44.1",

    "webpack-cli": "^3.3.12",

    "webpack-dev-server": "^3.11.0"

  },

-------------------------------------

    module: {

        rules: [

            {

                test: /\.js$/,

                loader: 'babel-loader',

                exclude: /node_modules/,

                query: {

                    cacheDirectory: true,

                    presets: ['@babel/preset-env', '@babel/preset-react']

                }

            }

        ]

    },

이렇게 변경해보니 돌아갑니다. 

0

이걸 지금봤네요 혼자 6시간씨름하고 겨우했는데..
역시 개발자는 검색능력

0

chul kim님의 프로필 이미지
chul kim
질문자

네.. 아마도 해당 강좌의 웹팩 설정은 많은 것을 바꾸셔야 할겁니다.

쉽지 않겠지만 화이팅입니다!

0

저도 해당 문제가 발생했습니다~ 감사합니다 :)

0

감사합니다 덕분에 도움되었습니다!!!

chul kim님의 프로필 이미지
chul kim

작성한 질문수

질문하기