[React] 2-5 웹팩으로 빌드하기 (command not found : webpack 해결하기)

인프런에 제로초님의 강의를 보고 정리한 내용입니다. 
[ 웹 게임을 만들며 배우는 React ]
https://www.inflearn.com/course/web-game-react

 

 

webpack을 사용할때 아래 이미지와 같이 command not found: webpack 이라는 오류메시지를 볼 수 있다.

노드를 사용할 때 자주 만나던 오류인데,,,여기서 또 만나게 될줄이야,,

이런경우는 명령어로 따로 등록해주어야 함

해결 방법은 세가지가 있다. 

1. 명령어를 등록해주거나 

2. 스트립트에 적어주거나

3. 마법의 npx

 

2. 스크립트에 적어주는 경우

package.json 안에 script로 적어주는경우 npm run 스크립트 명(dev) 을 사용하면webpack이 실행된다.

=> npm run dev

package.json 안의 script 

 

3. 마법의 npx를 사용하는경우

=> npx webpack

 

webpack을 실행하면 위에서 설정했던(webpack.config.js) dist폴더에 app.js가 생겨있는 것을 확인 할 수 있다.

 

발견한 오류

npx webpack을 했을때 아래같은 오류가 발생했다..

Module not found: Error: Can't resolve './client' in '/Users/Desktop/2022/react/react_0/2.끝말잇기'
resolve './client' in '/Users/Desktop/2022/react/react_0/2.끝말잇기'
  using description file: /Users/Desktop/2022/react/react_0/2.끝말잇기/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/Desktop/2022/react/react_0/2.끝말잇기/package.json (relative path: ./client)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/Desktop/2022/react/react_0/2.끝말잇기/client doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/Desktop/2022/react/react_0/2.끝말잇기/client.js doesn't exist
      jsx
        Field 'browser' doesn't contain a valid alias configuration
        /Users/Desktop/2022/react/react_0/2.끝말잇기/clientjsx doesn't exist
      as directory
        /Users/Desktop/2022/react/react_0/2.끝말잇기/client doesn't exist

한참...구글링하다가ㅠ 찾았는데 

범인은...여기..

jsx 앞에 .을 안썼다...하.하....

.을 안쓴 사람의..

 

2. Module parse failed: Unexpected token (6:16) ...

jsx는 자바스크립트 문법이 아님.. 
그래서 저번에 했던게 바벨! jsx때문에 했었음~ 

그래서 웹팩에서도 바벨을 셋팅해줘야함!

 

 

npm i -D @babel/core @babel/preset-env @babel/preset-react

npm i -D babel-loader 

-D를 하는이유는 바밸도 개발에서만 사용하기 때문임!

babel/core : 기본적인 바벨

preset-env : 자동으로 최신 문법을 옛날문법으로 바꿔줌

preset-react : jsx같은걸 지원할 수 있음

babel-loader : 바벨과 웹팩을 연결해줌

 

이제 연결해주는 걸 깔았으니까 webpack.config.js에 가자

 

webpack.config.js

이곳은 entry에있는 파일을 읽고 거기에 모듈을 적용한 후 output에 빼는 일을 한다.

아래처럼 모듈을 설정해준다.

  module :{
        rules :[{
            test : /\.jsx?/,  //규칙을 정할 파일등
            loader : 'babel-loader',
            options : {
                presets : [
                    '@babel/presets-env',
                    '@babel/presets-react'
                ],
            },
        }],
    },

3. Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@babel/preset-presets-env' imported from ..
또 오류가 나서..찾아봣는데ㅠ

webpack.config 파일에서 설정한 module > rules > options > presets 에서 presets부분을 지워주면 된다고 한다!!

 

 

+로 @babel/plugin-proposal-class-properties도 깔아준 후, 

위 코드 아래 plugins를 적어주었다.

 

그러고 실행(npx webpack)해주면 

app.js에 파일들이 만들어진당