setup webpack dev server

현재 hello world 문구를 수정하면 build 를 다시해야 반영이 됩니다.

매번 build를 하지 않게 hot reloading을 설정합니다.

hot reloading

hot reloading을 사용하기 위해서는 front 에서도 server가 필요합니다.

$ yarn add webpack-dev-server -D

npm 의 사소한 에러들이 있는데 아직 해결하지 못해서 yarn 으로 대체했습니다.
추후에 수정하겠습니다.

webpack-dev-server 는 추후에 proxy server의 역활도 합니다.

cors에러 문제 해결 등등..

$ yarn add webpack-cli
$ yarn add -D @types/webpack-dev-server
$ yarn add @pmmwh/react-refresh-webpack-plugin
$ yarn add react-refresh

typescript check 와 webpack 실행을 동시에 돌아가게 하기 위해서

$ yarn add fork-ts-checker-webpack-plugin- D

wepack.config.ts
webpack 설정 파일 참고

index.html을 실행할때는

<script src="./dist/app.js"></script>

webpack dev 서버를 통해서 실행 할때는 ./dist/ 에서 . 을 빼주세요

그리고 package.json 에 dev 라는 명령어를 통해 dev server를 실행 할수 있게 명령어를 추가합니다.

"scripts":{} 사이에 넣어주세요

"dev": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack serve --env development",

$ npm run dev

짜잔 이렇게 dev server 세팅이 끝났습니다.

지금까지 create react app 의 동작원리를 직접 세팅해보았습니다.