webpack4.0(二)--熱更新(webpack-dev-server)

本文轉載自查看原文 2019-12-09 21:46 820

webpack4.0---熱更新　　　　　　　　　　　　　　　　　　　　　　　　

　　使用webpack可幫助我們的開發以及打包，在開發過程中，有時候我們只修改了部分代碼並想不必刷新整個頁面即可看到更改后的效果，這時候 webpack-dev-server （WDS）熱更新就可以派上用場了。

1、關於 WDS 熱更新，有以下幾點：

　　（1）WDS 不刷新整個頁面。

　　（2）WDS 不輸出文件，而放在內存中（沒有磁盤IO，速度更快）。
　　（3）使用 HotModuleReplacementPlugin 插件(webpack自帶)。

2、安裝

npm i webpack-dev-server -D

package.json文件

3、項目文件目錄結構

在web10項目里建一個build文件夾里面在建一個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 }