webpack-dev-server是一個小型的Node.js Express服務(wù)器,它使用webpack-dev-middleware來伺服于webpack的資源包
content-base
設(shè)定webpack-dev-server伺服的資源路徑辟躏。如果不進(jìn)行設(shè)定的話歌殃,默認(rèn)是以當(dāng)前目錄為基本目錄
webpack-dev-server --content-base ./dist
需要注意的是次慢,如果配置文件配置了output的publicPath這個字段的值的話显拳,在index.html文件里面也應(yīng)做出調(diào)整。因?yàn)閣ebpack-dev-server伺服的文件是相對publicPath這個路徑的矮台。而且漓概,這個和output.path無關(guān)漾月,因?yàn)槲募嬖趦?nèi)存中-
自動刷新
1、iframe模式(頁面放在iframe中胃珍,當(dāng)發(fā)生改變時重載)
2梁肿、inline模式(將webpack-dev-server的客戶端入口添加到bundle中)
【兩種模式都支持熱模塊替換】inline模式有2種啟動方式:
1、命令行啟動- 在命令行中添加
--inline
命令 - 在webpack.config.js中添加devServer: {inline:true}
【devServer配置項只對命令行模式有效】
2觅彰、當(dāng)以Node.js API啟動時
- 法一: 由于webpack-dev-server的配置中無inine選項吩蔑,我們需要添加
'webpack-dev-server/client?http://localhost:8080/'
到webpack.config.dev.js配置的entry入口 - 法二: 將
<script scr="http://localhost:8080/webpack-dev-server.js"></script>
添加到html中 - 法三:
config.entry.app.unshift('webpack-dev-server/client?http://localhost:8080')
- 在命令行中添加
hot
開啟HMR,由webpack-dev-server
發(fā)送“webpackHotUpdate”消息到客戶端代碼historyApiFallback
單頁應(yīng)用404轉(zhuǎn)向index.htmlcompress
開啟資源的gzip壓縮proxy
代理配置quiet
不在控制臺打印任何lognoInfo
不輸出啟動logstats
打包狀態(tài)信息輸出配置