4.자동빌드

react-hot-loader , webpack-dev-server 설치

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

server가 있어야 frontend 코드변경점을 감지해서 자동으로 빌드 해줌(변경사항도바꿔줌) 노드몬같은것

 

 

 

webpack-dev-server는 ?

 //webpack.config.js
 "scripts": {
 	"dev": "webpack-dev-server"
 },

컴퓨터를 서버로 프론트엔드프로그램을 돌릴수 있게해줌

 

 

 

 

웹팩설정

1)실행부분 명령어 바꾸고

 //webpack.config.js
 "scripts": {
 	"dev": "webpack-dev-server --hot"
 },

2) babel-loader 를 loader하는 option에 plugin에 추가

    module: {
        rules:[{
            test: /\.jsx?/,   
            loader: 'babel-loader',   
            options:{   
                presets:[ 
                    ['@babel/preset-env',{ targets:{ browsers: ['> 1% in KR'] } , debug:true   } ],
                    '@babel/preset-react'],
                plugins:[
                    'react-hot-loader/babel' , //여기
                ],  
            },
           
        }]
    },

 

 

설치한 핫로더 불러와서 코드에적용

// index.jsx 
const React = require('react');
const ReactDom = require('react-dom');
const { hot } = require('react-hot-loader/root');  //

const Gugudan = require('./Gugudan');


const Hot = hot(Gugudan);  //
// ReactDom.render(<Gugudan />, document.querySelector('#root')  ); 
ReactDom.render(<Hot />, document.querySelector('#root')  ); // 

 

 

output 또는 import변경

 

webpack dev server가 output부분을 따로처리하기 때문에 A or B

A. index.html에서 js가져오는 부분 변경

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

 

B. webpack config에서 publicPath 추가

 output:{
        path: path.join(__dirname,'dist'),
        filename:'app.js',
        publicPath: '/dist/'  ///
    },  

 

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

path가 실제 경로 옵션이라고 하며

publicPath 는 가상 경로 같은 개념

 

node에서 /dist로 요청이 들어오면 실제로는 '/abc'파일에서 찾아라 해서

요청 URL과 파일실제경로다르게할수 있는 개념처럼

app.use('/dist', express.static( __dirname, 'abc' ))

 

 

webpack.config.js파일 수정시 서버 재시작해야 적용된다