• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

18.06.20 02:39 작성 조회수 310

4

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

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

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

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

감사합니다.

답변 7

·

답변을 작성해보세요.

1

배지원님의 프로필

배지원

2019.09.02

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

0

최재혁님의 프로필

최재혁

2021.04.26

윗분들 댓글보고 해결해서 정리해봅니다.
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

오크롱님의 프로필

오크롱

2020.08.19

"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

Ten님의 프로필

Ten

2020.04.13

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

0

chul kim님의 프로필

chul kim

질문자

2019.09.02

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

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

0

배지원님의 프로필

배지원

2019.09.02

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

0

자몽에이드님의 프로필

자몽에이드

2018.07.20

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