React 웹팩으로 빌드 해보기!
오늘은 React로 이루어져 있는 파일들을 웹팩으로 빌드 해보았다.
일단 나만의 아고라 스테이츠 레퍼런스로 빌드를 진행 했다.
client 쪽으로 번들을 진행!
npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react rimraf
먼저 웹팩과 cli,html 플러그인,바벨을 인스톨 해주었다.
바벨은 JSX를 자바스크립트 코드로 변환 하여 브라우저에서 동작할 수 있도록 한다.필요한 것들을 설치해 준 후에 하나씩 번들링을 진행해 보았다.
빌드가 시작되는 index.js 파일
먼저 src폴더에 React를 사용할 index.html파일을 하나 만들어 주고 사진과 같이 수정 했다.
index.js에서 렌더링하는 엘리먼트 id가 root이기 때문에 div id를 root로 설정해 주었다.
그리고 package.json에서 start를 webpack서버로 바꿔 주고 ,build 명령어도 추가!
start2는 그냥 허전해서 넣어 봤다.
//Webpack-dev-server를 이번에 처음 써봤는데 되게 편리 한 것 같다.
그 후에는 webpack.config.js 파일을 만들어 시작인 index.js를 entry로 추가하고 로더인 바벨과 스타일로더들을 설정 해주었다.
또, html도 생성해야 하기 때문에 플러그인도 추가 해주었다.
그 후에는 .babelrc파일을 생성해 사진과 같이 옵션을 넣어 줬는데 세션을 들어보니 babel.config.js로 해도 상관 없는 것 같다.
그렇게 한 후에 npm run build를 해보았는데..
오류가 발생했다..
그래서 React is not defined 오류를 열심히 구글링해서 찾아 본 결과 .babelrc에서 설정을 잘못 해준것으로 확인 했다.
해결법은 의외로 간단했다.
runtime 속성을 "automatic"으로 설정 해주어야 babel이
읽어 나갈 수 있다고 한다..!! 그래서 presets에 runtime도 넣어 주고 다시 npm run build 후에 다시 확인 해본 결과
깔끔하게 build 되었다.
분명 다 맞게 설정 했는데 babel에 하나 설정 안한거로 너무 헤메었고 시간이 오래걸렸다..
이제 github에 배포하는 것도 시도해보면 될듯!
