꾸생의 DevLog

React Webpack-dev-server 설정

Webpack-dev-server 리액트 코딩을 하면서 웹팩 빌드를 실행하고 결과를 확인하는 절차가 너무 번거로워 파일을 저장했을때 바로바로 빌드한 결과를 확인할 수 있도록 도와주는 Webpack-dev-server 설치와 설정 방법을 기록해본다. 1. webpack-dev-server, html-webpack-plugin 설치 > npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D 2. package.json 스크립트 명령어 추가(선택) { // ... "scripts": { "dev": "webpack serve" }, } 3. webpack.config.js 설정 var path = require('path'); var HtmlW..

2021.06.17  

[React] 리액트 webpack & babel 설정하기

React - webpack & babel 기존 CRA(Create-React-App) 프로젝트 생성 방식이 아닌, 수동으로 리액트 환경을 설정하는 방법으로 웹팩과 바벨 설정 방법을 알아보자. 1. 프로젝트 설정 및 리액트 설치 init-y npm i react react-dom - 웹팩(Webpack) 웹 어플리케이션의 규모가 커지면서 프로젝트마다 엄청난 자원의 파일들이 하나로 모여 구성된다. 이때, 파일들의 관계는 복잡하고 무겁기 때문에 브라우저가 이해하고 로드하는데 시간이 소요된다. 이 문제를 해결하기 위해 웹팩(Webpack)이라는 모듈 번들러를 사용해 파일들의 의존성 관계를 정리 및 최적화, jsx파일을 합쳐 하나의 자바스크립트 파일로 만들어준다. 번들러 : 여러 개의 파일을 모듈화 해서 하나의..

2021.06.15