webpack4.0 (2 개) - 뜨거운 갱신

webpack4.0 --- 뜨거운 갱신　　　　　　　　　　　　　　　　　　　　　　　　

　　 사용 웹팩은 우리의 개발을 도와 개발 과정에서 포장, 때때로 우리는 코드의 부분을 수정하려는 및 변경의 효과를 확인하기 위해 전체 페이지를 새로 고침,이 시간 웹팩-DEV-서버 (WDS) 뜨거운 업데이 트를하지 않고 있습니다 그것은 유용하게 사용할 수 있습니다.

1, WDS 뜨거운 업데이트에 대한, 다음 사항 :

　　 (1) WDS는 전체 페이지를 새로 고침하지 않습니다.

　　(2) WDS는 (더 빨리, 아니 디스크 IO) 메모리에 출력 파일을하지 않습니다.
　　(3) 사용 HotModuleReplacementPlugin 플러그 (웹팩 자신의).

2, 설치

NPM 내가 웹팩-DEV-서버 -D

package.json 파일

3, 프로젝트 파일 디렉토리 구조

web10 빌드에서 빌드 폴더에 프로젝트가있는 webpack.conf.js 파일을 구축

4 구성 webpack.conf.js

 1 //声明变量
 2 var webpack = require('webpack');
 3 var PATH = require('path');//这是nodejs的核心模块之一
 4 var SRC_PATH = PATH.resolve(__dirname,'../src');
 5 var DIST_PATH = PATH.resolve(__dirname,'../dist');
 6 
 7 
 8 module.exports = {
 9     entry:SRC_PATH+'\\index.js',
10     output:{
11         path:DIST_PATH,
12         filename:'bundle.js' 
13     },
14     //loader
15     module:{
16     },
17     //插件
18     plugins:[
19     ],
20     devServer:{//开发服务器
21         hot:true,//热更新
22         inline: true,//
23         open:true,//是否自动打开默认浏览器
24         contentBase:DIST_PATH,//发布目录
25         port:'0996',//控制端口
26         host:'0.0.0.0',//host地址
27         historyApiFallback:true,
28         useLocalIp:true,//是否用自己的IP
29         proxy:{
30             '/action':'http://127.0.0.1:8080/'
31         }
32     }
33 }