구구단 webpack으로 빌드하기 // 20210417

기존에 cdn방식으로 react를 호출해서 단일 html형식으로 빌드했던 구구단을 webpack을 사용해 빌드해보기.

1. 해당 경로에서 npm init

-author, license정도만 수정

2. 리액트, 리액트 돔 설치

npm i react react-dom

3. 웹팩 설치

npm i -D webpack webpack-cli

4. 바벨 설치

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

5. webpack설정 파일 생성

• 파일명 webpack.config.js

6. webpack.config.js 파일 내부 설정

7. client.jsx 파일 생성(app entry용 파일)

8. Gugudan.jsx 파일 생성

• 기존에 구현했던 구구단 로직 옮기기
• 위에서 require로 react 불러오기 필수
• 아래에서 module.exports 로 구구단 모듈화 필수

9. 마무리

• npm run dev 또는 npx webpack 해서 dist/app.js 생성 확인- 웹이기때문에 html파일 하나는 있어야해서 index.html파일 생성하고 script태그 안에 src="./dist/app.js" 로 웹팩으로 빌드한 파일 호출
• 끝