웹 팩 열 로드 자동 새로 고침 방법

본 고 는 웹 팩 이 열 로드 자동 새로 고침 을 실현 하 는 방법 을 소개 하 였 으 며,구체 적 으로 다음 과 같다.
1.webpack-dev-server
경량급 서비스
기능:코드 수정 이 브 라 우 저 에 제때에 나타 납 니 다.
STEP 1:설치

npm install webpack-dev-server -g 
这里写图片描述  
두 번 째 단계:의존 할 때 까지 쓰기

npm install webpack-dev-server --save-dev
这里写图片描述
세 번 째 단계:웹 팩 설정 파일 수정

  module.exports = {
            entry:"./js/index.js",
            output:{
                path:"/",     
 //       ,      ,      ,  webpack                。
                filename:"bundle.js"
            },
            module:{
                loaders:[
                    { test:/\.css$/,loader:'style-loader'},
                    { test:/\.css$/,loader:'css-loader'}
                ]
            },
            resolve:{
                extensions:['.vue','.js',".css",'jsx'] //        
            }
    }
설명:출력 디 렉 터 리 를 지정 하려 면 Content Base 명령 의 사용 을 배 워 야 합 니 다.
STEP 4:index.html 수정

<script type="text/javascript" src="bundle.js"></script>
다섯 번 째 단계:다음 명령 을 실행 하여 자동 새로 고침 을 실현 합 니 다.

webpack-dev-server --hot --inline  
설명:
웹 팩-dev-server 의 기본 포트 번 호 는 8080 입 니 다.
여섯 번 째 단계:
방문 하 다.http://localhost:8080/index.html 그리고 css 를 수정 하면 바로 웹 페이지 에 반응 하 는 것 을 볼 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기