-
[React 기초] Webpack 설치 및 실행 : 5탄 - 웹팩 개발 서버 (devServer) 설치컴퓨터 알아가기/React 2023. 12. 31. 19:30728x90반응형
웹팩과 관련하여 시리즈별로 나누어서 진행을 하고 있는데 보통 개발자가 아닌 초보자들은 한번 따라해도 금방 잊어버리기 일수입니다. 따라서 차근 차근 자기것으로 만들지 않는 한 그냥 모래성같이 머리속에서 사라집니다.
웹팩을 실행할 때 npm run build 라는 명령어를 사용하긴 했지만 코드 내용중 조금만 내용이 바뀌어도 결과를 보기위해 계속 build를 해 줄 수 밖에 없습니다. 이를 보완하기 위해 자체 서버를 만들어 작업한 내용을 실기간으로 볼 수 있게 만든 도구가 웹팩개발서버입니다. 자신의 PC에 설치하고 향후 웹팩작업에 반영하면 되겠습니다.
마찬가지로 본 내용은 코딩앙마의 프론트개발과 제로초 TV 강좌를 통해서 공부하면서 응용한 글입니다.
▒ 웹팩 개발 서버
1. 웹팩 개발서버(webpack devServer) 설치
노드에서 다음과 같이 설치합니다. 설치 후 항상 package.json에서 확인합니다.
package.json에서는 다음과 같이 설치가 되었음을 확인할 수 있습니다.
2. webpack.config.js 설정
모듈을 설정하는 webpack.config.js로 이동하여 modul.exports에서 다움과 같이 설정합니다.
3. 서버 설정
웹팩 개발서버를 작동시키기 위한 명령어를 만들어 주는 곳은 package.json에 'script'에서 만들어 줍니다. 다음과 같이 만듭니다. 개발 서버이기에 mode는 개발용으로 지정해 줍니다.
4. 실행
이제 웹팩 개발서버를 실행(npm start)하고 웹팩도 실행(npm run build)해 봅니다.
웹팩실행을 해 봅니다.
잘 작동하고 있는것을 볼 수 있습니다.
만일 실행시 경고나 에러가 발생하면 그때마다 대응하면 됩니다.
다음시간 CSS 모듈설치를 공부해 보고 구구단게임을 웹팩을 통해 만들어 보도록 하겠습니다.
반응형'컴퓨터 알아가기 > React' 카테고리의 다른 글
[React 기초] 구구단게임 웹팩으로 실행하기 (0) 2024.01.10 [React 기초] Webpack 설치 및 실행 : 6탄 - CSS Loader 설치하기 (0) 2023.12.31 [React 기초] Webpack 설치 및 실행 : 4탄 - HTML Plugin 설치 (0) 2023.12.30 [React 기초] Webpack 설치 및 실행 : 3탄 - React Webpack Babel Module 설치 (0) 2023.12.29 [React 기초] Webpack 설치 및 실행 : 2탄 - React 웹팩 실행 (0) 2023.12.28