웹팩 자동빌드하기

웹팩 자동빌드 설정하기.

npm i react-hot-loader
npm i webpack-dev-server

위 명령어로 설정한 다음에

 

webpack.config.js파일에 가서

 

1. module 안에있는 plugins에 'react-hot-loader/babel' 추가해준다.

2. output 안에 publicPath : '/dist/' 를 추가해준다.  웹팩 데브서버 설치시  설정해줘야함.

 

package.json 에 들어가서

 

3. script > build 부분을 "webpack-dev-server --hot" 으로 변경해준다.

 

그 후 client.jsx 파일로 가서

const React =require('react');
const ReactDom = require('react-dom');
const { hot} =require('react-hot-loader/root'); //추가

const WordRelay = require('./WordRelay'); //같은 폴더안에있으면 .

const Hot = hot(WordRelay); //추가

ReactDom.render(<Hot />, document.querySelector('#root')); //render안에 변경

변경 후에 아래 명령어 실행

npm run build 

후 , localhost:8080에 접속하면 볼 수 있다.

 

webpack.config.js파일을 수정하면 서버를 반드시 재시작할 것!

 

webpack.config.js파일에서 변경된거는 데브서버에서 감지를 못함.