webpack-dev-server

webpack-dev-server支持兩種模式來自動刷新頁面.

• iframe模式(頁面放在iframe中,當發生改變時重載)

• inline模式(將webpack-dev-sever的客戶端入口添加到包(bundle)中)

 

兩種模式都支持熱模塊替換(Hot Module Replacement).熱模塊替換的好處是隻替換更新的部分,而不是頁面重載.

iframe模式

使用這種模式不須要額外的配置,只須要如下面這種URL格式訪問便可

http://«host»:«port»/webpack-dev-server/«path»

例如:http://localhost:8080/webpack...

 

inline模式

inline模式下咱們訪問的URL不用發生變化,啓用這種模式分兩種狀況:

1 當以命令行啓動webpack-dev-server時,須要作兩點：

• 在命令行中添加--inline命令

• 在webpack.config.js中添加devServer:{inline:true}

 

2 以node.js API啓動webpack-dev-server

注意：webpack配置中的devSever配置項只對在命令行模式有效。

 

(Hot Module Replacement)熱模塊替換

在命令行中運行inline模式，並啓用熱模塊替換

這裏只須要多增長 --hot指令就OK了.以下所示.

webpack-dev-server --content-base build --inline --hot

注意:命令行模式下,webpack.config.js中必定要配置output.publicPath來指定編譯後的包(bundle)的訪問位置.

 

在Nodejs API中運行inline模式，並啓用熱模塊替換

這裏須要作如下三點:

• 在webpack.config.js的entry選項中添加:webpack/hot/dev-server

• 在webpack.config.js的plugins選項中添加:new webpack.HotModuleReplacementPlugin()

• 在webpack-dev-server的配置中添加：hot:true