현재 hello world 문구를 수정하면 build 를 다시해야 반영이 됩니다.
매번 build를 하지 않게 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 의 동작원리를 직접 세팅해보았습니다.