從零學腳手架(七)---webpack-dev-server使用
若是此篇對您有所幫助，在此求一個star。項目地址： OrcasTeam/my-clihtml
webpack-dev-server使用
什麼是webpack-dev-server
使用vue-cli 、react-cli腳手架時，執行yarn start命令會啓動一個本地服務器，瀏覽器訪問服務器就能夠預覽代碼，而且代碼文件更新後頁面會從新加載數據，很是方便，這個功能就叫作dev-server。前端
在webpack中，由webpack-dev-server提供。vue
webpack-dev-server 庫做用開啓一個服務器。瀏覽器訪問服務器時，與瀏覽器使用WebSocket進行長連接。node
而且webpack-dev-server 會開啓webpack監聽本地代碼文件功能。當本地代碼文件更新後，進行從新打包編譯，webpack-dev-server 經過WebSocket將更新模塊信息推送給瀏覽器。瀏覽器根據這次編譯信息，去獲取最新代碼，一個大體這樣的操做。react
🐋 webpack自己就支持監聽文件變化，webpack-dev-server只是默認開啓webpack的監聽屬性。webpack
webpack-dev-server庫並不複雜，不過裏面涉及到的東西有些多。git
關於webpack-dev-server庫，想深刻的介紹下。github
在此分爲兩篇來介紹：web
- 介紹webpack-dev-server屬性配置，而且介紹部分屬性源碼中的設置
- 稍微介紹webpack-dev-server流程和原理。
webpack-dev-server 安裝
webpack-cli/bin/config-yargs 的問題
截至到寫此篇時，webpack-dev-server的最新版本是3.11.2chrome
有使用過此版本的朋友會知道，webpack-dev-server@3.11.2與webpack@5.X共同使用時會具備一個錯誤：Cannot find module 'webpack-cli/bin/config-yargs
這個問題我的感受是官方有些坑了。
先來安裝webpack-dev-server@3.11.2，看看這個錯誤。
yarn add -D webpack-dev-server@3.11.2
使用過webpack-dev-server的朋友都會知道，執行webpack-dev-server的命令爲：webpack-dev-server
官方NPM文檔中也是webpack-dev-server命令
通常都會將yarn start命令設置爲：webpack-dev-server，
🐋 在這裏將
yarn start:dev命令設置爲：webpack-dev-server。主要是爲了這個錯誤
此時，若是不出意外的話， 執行yarn start:dev 就能夠執行webpack-dev-server。
可是，執行就會碰到那個錯誤：
錯誤提示是找不到webpack-cli庫中的config.yargs模塊。感受會有很多剛學習webpack而且搜索能力稍微弱一些的朋友會卡在這。
🐋 配置使用的webpack-cli@4.5.0和webpack@5.24.0
這個錯誤其實很簡單，直接在issues就能夠找到答案。
原來是使用了新的執行命令了：webpack serve。如今將新命令進行配置
此時使用yarn start執行就能夠成功執行。默認啓動的是8080端口
那麼這到底怎麼回事呢？經過查看源碼和測試webpack-dev-server@4.0.0beta.0我的略有些猜想。
先看一下webpack-dev-server@3.11.2中 /bin/webpack-dev-server.js 文件模塊中一段代碼。
/bin/webpack-dev-server.js會是使用webpack-dev-server命令執行的文件模塊
在 /bin/webpack-dev-server.js 文件模塊中加載了webpack-cli庫中的 /bin/ [config/] config-yargs 和 /bin/ [utils/] convert-argv 。
可是在版本 代碼結構進行了巨大的改變，已經去掉了這兩個文件模塊，因此也就致使了報錯。
這個問題就是目前處於迭代期的緣由。
在以前使用webpack@4.X版本時，使用的webpack-cli@3.X和webpack-dev-server@3.X
如今更新到了webpack@5.X，webpack-cli也進行了大版本的更新：webpack-cli@4.X。而且內部結構發生了巨大的變化。
可是webpack-dev-server的新版本尚未開發完成，而且webpack-dev-server@3.X代碼沒有修復這個問題。
webpack-cli@4.X中加入了webpack serve這個新命令。webpack serve也是之後webpack推薦的命令。
webpack-dev-server這個，命令問題在webpack-dev-server@4.X中修復了。不過目前webpack-dev-server@4.X只有一個webpack-dev-server@4.0.0beta.0。
尚未穩定版本
在webpack-dev-server@4.0.0beta.0的代碼能夠看到 /bin/webpack-dev-server.js 文件模塊中沒有了上面兩段代碼。
在webpack-dev-server@4.0.0beta.0文檔中的命令改成了webpack serve。不過webpack-dev-server依然可使用。
🐋🐋🐋 webpack-cli@4.X版本開始，webpack團隊將dev-server的命令改成了
webpack serve。webpack與webpack-cli都進行了大版本的更新。webpack-dev-server目前新版本尚未開發完成。因此暫時就出了這麼一個問題
webpack serve命令在 webpack-cli@4.0.0版本文檔中能夠找到。
webpack serve
關於webpack serve命令的執行，執行入口文件與webpack命令同樣，都是 webpack 庫的 /bin/index.js 。在此文件模塊中調用了webpack-cli庫模塊。
而後在webpack-cli庫根據其命令參數調用@webpack-cli庫中的 /serve/lib/index.js ，在此模塊文件中啓動 webpack-dev-server服務器。這些代碼都是webpack-cli@4.X版本新增長的。詳細內容在下一篇介紹。
🐋🐋 webpack、webpack-cli、webpack-dev-server跨庫調用都是根據模塊路徑調用。因此只要某個庫文件結構稍微改動，就會像
webpack-dev-server命令這樣直接報錯。 不過在新版本代碼進行了優化，經過約定名稱進行跨庫調用。儘量下降了耦合度。
🐋 @webpack-cli是webpack-cli@4.X依賴的一個庫。
webpack-dev-server@3.X 和webpack@5.X WebSocket問題
執行yarn start後，會開啓一個8080端口的服務器。
可是webpack@5.X和webpack-dev-server@3.X一塊兒使用時WebSocket還有問題
上面簡單說過WebSocket是與瀏覽器創建長連接，經過WebSocket向瀏覽器推送信息進行改變瀏覽器狀態。
下面來作一個測試，運行yarn start後，使用瀏覽器訪問。
此時若是將代碼更新，會發現瀏覽器並無同步更新，而且瀏覽器WS窗口沒有推送數據
🐋 WS「：WebSocket數據顯示窗口
後來我對源碼進行了調試，發現根本就沒有鏈接WebSocket Server。
最後在github中找到了答案。
緣由是package.json文件中的browserslist屬性，將此屬性去掉就能夠進行推送。
這是webpack-dev-server@3.X的一個問題。可是按照官方給出的解釋好像只會在webpack-dev-server@4.X中修復這個問題。
我也使用webpack-dev-server@4.0.0beta.0版本進行了測試，這個bug被修復了。
版本選擇
目前webpack@5.X穩定版才4個月，而且webpack-dev-server尚未對應新版本的穩定版。因此webpack@5.X還只能供學習使用。
在此直接使用webpack@5.24.0+webpack-cli@4.5.0+webpack-dev-server@4.0.0beta.0版進行學習。
webpack-dev-server@4.0.0beta.0 屬性配置相對webpack-dev-server@3.X稍微有些變更，在此也會稍微提一提webpack-dev-server@4.0.0beta.0與webpack-dev-server@3.X屬性對應關係和差別性。
yarn add -D webpack-dev-server@4.0.0beta.0
🐋🐋 webpack-dev-server@4.0.0beta.0 提供了比較完善的錯誤提示，當設置了錯誤屬性時，webpack-dev-server@4.0.0beta.0可以給出詳細提示信息。
webpack-dev-server配置
webpack-dev-server屬性是配置在webpack配置文件中的devServer屬性。webpack-dev-server執行時會讀取這個屬性來作配置。
因爲webpack-dev-server只是開發時使用的一個功能，因此配置屬性寫在webpack.dev.js文件中就能夠
const path = require('path');
const { merge } = require('webpack-merge');
const { config } = require('./config');
const common = require('./webpack.common');
// 使用node.js的導出，將配置進行導出
module.exports = merge([
common(true),
{
mode: 'development',
devServer:{
// 服務器host，默認爲localhost，
host: '127.0.0.1',
// 服務器端口號，
// 默認爲8080
port: 7777,
// string | boolean
// 啓動後是否打開瀏覽器
// 默認爲false，若是設置爲true， 啓動時會自動打開瀏覽器
// 當爲字符串時，打開指定瀏覽器
open: true, // 'chrome'
// 打開瀏覽器後默認打開的頁面
// string | Array<string>
// 當設置爲Array時，會打開多個頁面
openPage: '', // ['', 'index.html'], //'index.html',
// 是否啓用gzip壓縮,
// 默認爲false
compress: true,
// 是否啓動熱更新（HMR）
// 默認爲false，
// 熱更新使用的是webpack中HotModuleReplacementPlugin
hot: true,
// 設置容許訪問的IP地址，設置爲true，則不容許任何IP訪問，
// 也能夠設置爲數組，與webpack-devser@3.X 的allowedHosts同樣
// 此屬性至關於webpack-devser@3.X 的allowedHosts屬性
firewall: true,
// 是否設置HTTP/2服務器。
// 對於nodeV10以上的版本 因爲spdy有問題
// 因此若是將此屬性設置爲true，則默認使用https做爲服務
http2: false,
// // 是否使用https安全鏈接
// // boolean 或者 object
// // 當爲object時，能夠設置安全證書
// // 默認爲false，可是當開啓http2屬性時，會默認使用https 默認狀況下， dev-server使用HTTPS爲HTTP/2提供服務
// https: {
// // 證書，證書屬性也能夠設置在devServer下，當https設置爲boolean時， 與https同級設置
// key: '',//fs.readFileSync('/path/to/server.key'),
// cert: '',//fs.readFileSync('/path/to/server.crt'),
// ca: '',//fs.readFileSync('/path/to/ca.pem'),
// },
// 服務器代理配置，當先後端分離開發時，前端請求API須要指定地址
// 此屬性能夠設置代理的IP地址
// 例如以下，當api請求 /api/user真實地址爲http://localhost:3000/user
// 詳情使用請參考官網https://webpack.js.org/configuration/dev-server/#devserverproxy
proxy: {
'/api':{
target: 'http://localhost:3000',
// pathRewrite屬性能夠設置前綴，若是不設置pathRewrite： /api/user真實地址爲http://localhost:3000/api/user
pathRewrite: {'^/api' : ''},
// HTTPS設置爲無效證書
// secure: false
}
},
// 服務器返回時加入的response的自定義header
headers: {
'X-Custom-Foo': 'bar'
},
// 靜態文件屬性
// 此屬性是對webpack-devser@3.X某些屬性的彙總
static: {
// 要掛載在服務器上靜態文件的本地目錄
// 默認爲爲當前工做目錄
// 建議使用絕對地址
// 例如設置爲 /assets後， 會加載使用本地/assets目錄下的靜態文件到服務器
// 至關於webpack-dev-server@3.X的 contentBase屬性
directory: path.join(config.root),
// 掛載到服務器中間件的可訪問虛擬地址
// 例如設置爲/static，在訪問服務器靜態文件時，就須要使用/static前綴
// 至關於webpack-dev-server@3.X的 contentBasePublicPath屬性
publicPath: '/',
// 設置掛在靜態文件時使用的參數
// 至關於webpack-dev-server@3.X的 staticOptions屬性
staticOptions: undefined,
// 是否加入serve-index中間件，默認爲true
// 至關於webpack-dev-server@3.X的 // 是否能夠在瀏覽器訪問靜態文件列表。
// 默認爲true，webpack-dev-server使用的是serve-index中間件實現這一功能
// 至關於webpack-dev-server@3.X的 serveIndex屬性
serveIndex: true,
// 是否使用chokidar庫進行監聽文帝靜態文件變化。
// webpack使用的是文件系統的的變化通知，可是有時候可能會無論用，例如使用網絡文件系統
// 因此能夠設置屬性使用chokidar庫進行輪詢檢測文件變化。
// 此屬性能夠設置爲boolean類型也能夠設置爲對象類型指定輪詢時間(毫秒數）
// 至關於webpack-dev-server@3.X的 watchOptions屬性
watch: {
poll: 3000
},
},
// 設置WebSocket客戶端的一些屬性
client: {
// 推送客戶端日誌級別，
// 屬性具備 "none" | "error" | "warn" | "info" | "log" | "verbose"
// 例如設置error ，WS並非推送打包警告和消息， WS客戶端會將日誌打印在控制檯上
// 若是設置爲none， 就算打包失敗也不會有消息
// 至關於webpack-dev-server@3.X的 clientLogLevel屬性
logging: 'verbose',
// 是否在瀏覽器控制檯打印打包進度，
// 至關於webpack-dev-server@3.X的 progress屬性
progress: true,
// 至關於webpack-dev-server@3.X的 sockPath屬性
// path: '',
// 至關於webpack-dev-server@3.X的 sockHost屬性
// host: '',
// 至關於webpack-dev-server@3.X的 sockPort屬性
// port: '',
},
public: undefined,
// webpack-dev-middleware中間件使用的屬性
dev:{
// 設置服務器response加入的自定義header信息
// 此屬性在webpack-dev-middleware中間件使用
headers:{
// 響應頭添加數據
'X-Dev-Header': 'X-Dev-Header',
serverSideRender: false,
},
// 設置webpack-dev-middleware中間件的mimeTypes
// 至關於webpack-dev-server@3.X的 mimeTypes屬性
// 至關於webpack-dev-server@3.X的 mimeTypes屬性
mimeTypes:{
},
// 是否將打包結果寫入到磁盤之中
// 默認爲false
// 至關於webpack-dev-server@3.X的 writeToDisk屬性
writeToDisk: true,
// 設置打包文件存儲的目錄地址。此屬性由webpack-dev-middleware設置
// 例如當設置爲/public,那麼訪問服務器全部信息都須要加入/public前綴
// 至關於webpack-dev-server@3.X的 publicPath屬性
publicPath: '/',
// 設置根目錄所指向的頁面。
// 例如localhost:8080能夠直接訪問到index.html是由於默認值爲index.html
// 默認值也是index.html
// 至關於webpack-dev-server@3.X的 index屬性
index: 'index.html',
// none" | "summary" | "errors-only" | "errors-warnings" | "minimal" | "normal" | "detailed" | "verbose" | boolean | object { … }
// 設置打包文件日誌輸出級別，會輸出在服務器終端
// 至關於webpack-dev-server@3.X的 stats屬性
stats: 'minimal',
// 自定義打包文件的輸出流
// 默認狀況下，輸入流爲memory
outputFileSystem: undefined,
methods: undefined,
serverSideRender: undefined
},
// 設置編譯出錯或警告後，頁面是否會直接顯示信息， boolean | {}
// 默認爲false，當失敗後會顯示空白頁
// 設置爲true後，編譯失敗會顯示錯誤/警告的覆蓋層,也能夠設置爲object，顯示多種類型信息
overlay: {
warning:true,
errors: true
},
// 是否要注入WebSocket客戶端。也就是是否要進行長連接通信
// boolean | function (compilerConfig) => boolean
// 將此屬性設置爲false，那麼hot、overlay等功能都會失效
// 默認爲true， 有興趣的諸君能夠設置爲false測試一下
injectClient: true,
// 是否注入HMR， 這個屬性是injectClient的子集。隻影響熱更新
injectHot: true,
// 是否開啓自動刷新瀏覽器功能
// 此屬性優先級低於hot
liveReload: false,
// 是否開啓ZeroConf網絡
bonjour: false,
// 是否將全部404頁面都跳轉到index.html
// boolean | object
// 當此屬性設置爲true或爲object時而且使用HTML5 API時 全部404頁面會跳轉到index.html
// 使用的connect-history-api-fallback庫 設置爲對象，則會將此對象傳參給connect-history-api-fallback庫
historyApiFallback: false,
// 是否使用局域網IP打開頁面
useLocalIp: false,
// 是否監聽node中stdin.end事件， 關閉服務器
stdin: false,
// 終止信號，設置爲true時 監聽['SIGINT', 'SIGTERM'];事件，事件觸發後結束進程
// 目前dev-server強制將此屬性設置爲true了，因此改成false無論用。
setupExitSignals: true,
// 設置WebSocket
// 能夠設置使用的WebSocket庫。內置的庫爲sockjs和ws
// 還能夠自定義設置WebSocket Server和WebSocket Client
transportMode:{
// 設置使用的WebSocket， 值爲 sockjs或者ws
// sockjs 使用的sockjs庫
// ws 使用的ws庫
// webpack-dev-server@4.X使用的是WS webpack-dev-server@3.X 使用的是sockjs
// 目前在webpack-dev-server@4.X使用sockjs會出錯， webpack-dev-server@3.X使用WS也會報錯
server: 'ws'
},
// 自定義中間件鉤子屬性
// 優先於server內部中間件執行
// 至關於webpack-devser@3.X 的before函數
onBeforeSetupMiddleware: (app, server, compiler) =>{
//console.log('我是before', compiler.options)
},
// server內部執行完全部中間件後執行當前中間件
// 至關於webpack-devser@3.X 的after函數
onAfterSetupMiddleware: (app, server, compiler) =>{
},
// dev-server提供的當服務器啓動後執行的鉤子函數
onListening: (server) => {
// const port = server.listeningApp.address().port;
// console.log('Listening on port:', port);
},
},
}
])
-
host：服務器啓動使用的host地址
屬性可設置爲：String
默認值：localhost
-
port：服務器啓動使用的端口號
屬性可設置爲：Number
默認值：8080
-
open：啓動服務器後是否自動打開瀏覽器，
屬性可設置爲：String、Boolean
屬性值爲Boolean：是否打開默認瀏覽器
屬性值爲String：設置打開指定的瀏覽器，例如：chrome
默認值：false
-
openPage：自動打開瀏覽器時的路由地址。
屬性可設置爲：String、Array
屬性值爲String：打開指定的地址
屬性值爲Array：打開數組中的全部地址。
默認值：index.html
-
compress：是否啓動gzip壓縮數據。
使用的compression中間件進行壓縮。
默認值：false
-
hot：是否啓動熱更新（HMR）。
熱更新（HMR）技術是代碼更新後，瀏覽器只加載須要更新的數據。熱更新（HMR）屬性是必備屬性之一。
熱更新（HMR）真正執行的是webpack中HotModuleReplacementPlugin
默認值：false
-
firewall：是否啓用防火牆
屬性可設置爲：Boolean、Array
屬性值爲Boolean：是否啓用防火牆，爲true，則不容許其它任意主機訪問；爲false，則容許其它主機訪問
屬性值爲Array：設置能夠訪問的IP地址。 至關於 webpack-dev-server@3.X中allowedHosts
默認值：true
🐋 此屬性就是webpack-dev-server@3.X的allowedHosts屬性
-
https：是否使用HTTPS安全鏈接方式。
屬性可設置爲：Boolean、Object
屬性值爲Boolean：是否使用HTTPS鏈接方式
屬性值爲Object：設置HTTPS安全證書信息
默認值：false
-
http2：是否使用HTTP/2
當此屬性設置爲true時，默認會使用HTTPS安全鏈接方式。也就是https會設置爲true
默認值：false。
-
proxy：服務器代理配置。
先後端分離時，前端請求API須要指定地址，此屬性能夠配置IP地址，當訪問指定請求時就請求配置的IP地址。
例如在請求 /api 的接口時會訪問http://localhost:3000。具體可參考官網：devserverproxy。
固然也能夠不使用此屬性，直接使用一個靜態字符串或者配置文件。看我的編碼習慣
-
headers：設置服務器Response消息內自定義header信息。
屬性可設置爲：Object
默認值：null
-
static：對靜態文件屬性的配置
屬性可設置爲：Object、Array
屬性值爲Object：配置靜態文件屬性
屬性值爲Array：配置多個靜態文件屬性
webpack-dev-server@3.X不具備此屬性。此屬性只是將webpack-dev-server@3.X中關於靜態文件配置的屬性進行彙總封裝
-
directory：設置服務器掛在靜態文件的 本地目錄。
例如設置爲 /assets 後， 會加載使用本地 /assets 目錄下的靜態文件到服務器
屬性可設置爲：String
默認值：/ package.json文件所在地址。
🐋 此屬性就是webpack-dev-server@3.X的contentBase屬性
-
publicPath：靜態文件掛載到服務器中的虛擬地址，
例如設置爲 /static 後， 那麼使用靜態文件時必須加入 /static 前綴
屬性可設置爲：String
默認值：/
🐋 此屬性就是webpack-dev-server@3.X的contentBasePublicPath屬性
-
staticOptions：服務器掛載靜態文件時使用到的參數
webpack-dev-server掛在靜態文件使用的是 express.static(directory,staticOptions) 中間件，此屬性進行 express.static(directory,staticOptions) 使用的參數，具體請參考express框架
屬性可設置爲：Object
-
serveIndex： 是否能夠在瀏覽器訪問靜態文件列表。
webpack-dev-server使用的是serve-index庫做爲瀏覽器訪問靜態文件功能。
屬性可設置爲：Boolean
默認值：true
🐋 此屬性就是webpack-dev-server@3.X的serveIndex屬性
-
watch：是否使用輪詢方式檢查文件變化。
webpack默認使用的是文件系統的變化通知。可是在特殊狀況下（例如網絡文件系統）時消息通知會失效
因此可使用輪詢方式進行檢查文件變化。使用的chokidar來作輪詢檢測
屬性可設置爲：Boolean、Object
屬性值爲Boolean：是否開啓輪詢檢測
屬性值爲Object：配置輪詢參數，例如配置輪詢時間等
默認值：false
🐋 此屬性就是webpack-dev-server@3.X的watchOptions屬性
-
client：WebSocket客戶端屬性的設置。
屬性可設置爲：Object
webpack-dev-server@3.X不具備此屬性。此屬性只是將webpack-dev-server@3.X中關於WebSocket客戶端配置屬性的彙總封裝
-
logging：WebSocket客戶端在瀏覽器控制檯中輸出日誌級別。
屬性可設置爲："none" | "error" | "warn" | "info" | "log" | "verbose"
默認值：info
例如設置爲verbose 便會將全部日誌輸出在瀏覽器控制檯；none則不會輸出任何日誌
🐋此屬性就是webpack-dev-server@3.X的clientLogLevel屬性
-
progress：是否將打包進度輸出在瀏覽器控制檯中（瀏覽器控制檯是否顯示打包進度）
屬性可設置爲：Boolean
默認值：false
🐋此屬性就是webpack-dev-server@3.X的progress屬性
-
-
dev：設置webpack-dev-middleware中間件使用的一些配置屬性。
屬性可設置爲：Object
webpack-dev-server@3.X不具備此屬性。此屬性只是將webpack-dev-server@3.X中關於webpack-dev-middleware使用屬性的彙總封裝
-
headers：設置服務器Response消息內自定義header信息。
webpack-dev-server@3.X 中devServer.headers在兩個地方使用到了。而webpack-dev-server@4.X進行了拆分，此屬性只負責webpack-dev-middleware中間件。只不過最後結果都一致。
屬性可設置爲：Object
-
mimeTypes：設置webpack-dev-middleware mimeTypes屬性，具體請參考webpack-dev-middleware文檔 。
🐋此屬性就是webpack-dev-server@3.X的 mimeTypes屬性
-
writeToDisk：是否將打包編譯文件寫入磁盤
webpack-dev-middleware默認會將打包編譯文件寫入到內存流，以達到更快的訪問速度。
屬性可設置爲：Boolean
默認值：false
🐋此屬性就是webpack-dev-server@3.X的writeToDisk屬性
-
publicPath：設置打包編譯文件存放的目錄地址
例如設置爲 /public ，那麼在訪問打包編譯生成的文件資源時都須要添加 /public 前綴
屬性可設置爲：String
默認值：/
🐋🐋 static.publicPath和dev.publicPath屬性設置不同， static.publicPath
static.publicPath 表明靜態文件在服務器中存儲的地址，代碼使用靜態文件時須要添加目錄前綴
dev.publicPath 表明將代碼編譯打包的目錄地址，瀏覽器訪問時須要添加目錄前綴
🐋 此屬性就是的publicPath屬性
-
index：根目錄所指向的文件。
此屬性就是可以在瀏覽器訪問根目錄指向index.html的緣由。
屬性可設置爲：String
默認值：index.html
🐋 此屬性就是webpack-dev-server@3.X的index屬性
-
stats：設置打包文件時日誌輸出級別。
啓動dev-server時會在控制檯中看到好多打包信息：文件大小、文件名稱等信息，就是使用此屬性進行控制。
屬性可設置爲：「none" | "summary" | "errors-only" | "errors-warnings" | "minimal" | "normal" | "detailed" | "verbose" | boolean | object { … }
默認值：normal
🐋 此屬性就是webpack-dev-server@3.X的stats屬性
-
outputFileSystem：控制打包文件的輸出流。
默認輸出流是內存流，之將文件編譯打包至內存中，此屬性能夠更改輸出流。
-
-
-
overlay：打包編譯時出現錯誤/警告時，是否直接顯示在頁面。
此屬性在webpack-dev-server@4.0.0beta.0具備bug。
屬性可設置爲：Boolean、Object
屬性值爲Boolean：爲false時不顯示；爲true時，當編譯出現錯誤時，顯示在頁面中
屬性值爲Object：自定義配置警告和錯誤狀態。
-
injectClient：是否注入WebSocket
屬性可設置爲：Boolean、function (compilerConfig) => boolean
默認值：true
-
injectHot：是否注入熱更新（HMR）。
此屬性是至關於injectClient屬性的一個子集，只控制熱更新（HMR）
屬性可設置爲：Boolean、function (compilerConfig) => boolean
默認值：true
🐋🐋 此屬性在webpack-dev-server@4.0.0beta.0源碼中還能夠設置only字符串，也就是webpack-dev-server@3.X 中的hotOnly屬性。可是屬性校驗中只容許設置Boolean。
-
liveReload：是否啓動刷新瀏覽器
此屬性開啓後會在在更新代碼數據後從新刷新瀏覽器
可是此屬性優先級低於hot，當開啓熱更新後，會優先使用熱更新。
屬性可設置爲：Boolean
默認值：false
-
bonjour：是否開啓Zeroconf網絡
關於Zeroconf，有興趣的朋友能夠查看相關文檔
屬性可設置爲：boolean
默認值：false
-
historyApiFallback：是否將全部404頁面指向index.html
此屬性使用了connect-history-api-fallback來處理404頁面
屬性可設置爲：Boolean、Object
屬性值爲Boolean：是否啓用此功能
屬性值爲Object：設置connect-history-api-fallback庫的參數
默認值：false
-
useLocalIp：是否使用本地局域網啓用服務器
屬性可設置爲：Boolean
默認值：false
-
stdin：是否監聽Node.js中stdin.end事件關閉服務器
屬性可設置爲：Boolean
默認值：false
-
setupExitSignals：是否監聽Node.js中的 ['SIGINT', 'SIGTERM'] 事件關閉服務器。
此屬性爲webpack-dev-server@4.0.0beta.0新增長，在webpack-dev-server@4.0.0beta.0版本測試，此屬性內置了true屬性，沒法更改
-
transportMode：設置WebSocket庫信息。
webpack-dev-server內置了兩個WebSocket庫：ws、sockjs。能夠進行使用，而且能夠自定義WebSocket Server和WebSocket Client。具體請參考官網
🐋
webpack-dev-server@4.0.0beta.0默認使用：ws
webpack-dev-server@3.X默認使用：sockjs
-
onBeforeSetupMiddleware：自定義鉤子中間件函數，此中間件會優先其它中間件執行。
🐋此屬性就是webpack-dev-server@3.X的before屬性
-
onAfterSetupMiddleware：自定義鉤子中間件函數，此中間件會在全部中間件以後執行。
🐋此屬性就是webpack-dev-server@3.X的after屬性
-
onListening：設置webpack-dev-server服務器啓動後執行的鉤子函數。
-
以上即是webpack-dev-server@4.0.0beta.0中部分配置屬性。
相對於webpack-dev-server@3.X，webpack-dev-server@4.0.0beta.0版本對配置屬性作了更好的整合。
host / port
這兩個屬性是最容易理解而且使用最多屬性之一。
webpack-dev-server內部使用express框架。
webpack-dev-server@4.0.0beta.0庫中 /lib/Server.js 文件就是webpack-dev-server服務器模塊。
/lib/Server.js 具備一個 listen()，listen() 就是啓動服務器函數。
而listen()的調用是在@webpack-cli庫的serve/lib/startDevServer.js。
能夠看到在serve/lib/startDevServer.js中使用了options.port和options.host屬性值來啓動服務器。
這兩個屬性就是來自webpack配置中的devServer。
至於默認8080端口號的提供是在findPort()
🐋🐋 源碼是基於webpack-dev-server@4.0.0beta.0。?raw=true
open、 openPath
這兩個屬性在服務器啓動後判斷是否啓動瀏覽器。
Server.listen() 回調函數調用了showStatus()。
隨後調用了 /lib/util/runOpen.js模塊啓動瀏覽器
能夠看到，open和openPath屬性都作了類型判斷。
open屬性支持設置字符串打開指定瀏覽器；
openPath能夠配置爲數組打開多個頁籤。最後使用了open庫來打開瀏覽器
hot、lveReload
在Server.listen() 回調函數中使用 hot屬性作了判斷 ，當設置了hot或liveReload屬性時，就會建立WebSocket· Server 。
也就是隻有設置了hot或者liveReload時，纔會使用WebSocket 與瀏覽器進行長連接
static
static屬性剛纔說了，是webpack-dev-server@4.X對關於靜態文件屬性的封裝：訪問路徑、文件監聽等。
在這裏只是詳細介紹下部分屬性。
directory、publicPath、staticOptions
這三個屬性是express服務器設置靜態文件使用的屬性。
在Server.setupStaticFeature()，使用了express服務器掛載了靜態文件中間件（express.static）。
將中間件掛載到服務器上的訪問地址是：static.publicPath。
而掛載的本地靜態文件地址是：static.directory。
能夠看到，express服務器掛載了其訪問目錄爲publicPath。而要掛載本地靜態文件目錄爲directory。
靜態文件中間件使用的參數是：static.staticOptions
例如
將static.directory屬性設置爲： path.join(config.root, 'assets')；static.publicPath屬性設置爲：/static
在訪問 /assets/images/yj.png 圖片時就應該使用 /static/images/yj.png
🐋🐋 static.publicPath和static.directory屬性通常不會自定義，如需自定義，須要注意將目錄地址設置好，避免在production找不到
🐋 源碼中static和static.publicPath屬性都是Array。因此配置屬性時能夠配置爲Array
🐋 在此只是以圖片作一個例子，並不涉及到文件打包。
serveIndex
此屬性是設置可否在瀏覽器中查看靜態文件。webpack-dev-server內部使用的是serve-index庫
若是將static.serverIndex屬性設置爲false，那麼在瀏覽器中查看靜態文件路徑，會直接是404
若是static.serverIndex屬性爲true，那就能夠在瀏覽器中查看靜態文件
dev
此屬性是webpack-dev-middleware庫使用的一系列屬性彙總。
index
此屬性是設置根目錄所指向的文件，代碼在webpack-dev-middleware庫中 /dist/utils/getFilenameFromUrl.js 文件
能夠看到，在處理static.index屬性時作了類型判斷。
而且其默認值爲index.html。
因爲html-webpack-plugin庫中的filename屬性默認值也是index.html
也就能夠在不作配置狀況下默認就能夠在根目錄下訪問代碼。
固然也能夠更改此屬性。不過在更改代碼時也要將html-webpack-plugin庫的filename屬性進行更改。不然訪問時會404
🐋🐋🐋 約定大於配置，編寫代碼時儘可能作到使用統一約定。
stats
此屬性是控制打包日誌輸出等級的。在默認狀況的執行webpack-dev-server。老是能在控制檯輸出好多日誌信息。這些日誌信息就是由此屬性控制的。
代碼是在webpack-dev-middleware庫中 /dist/utils/setupHook.js 模塊。
代碼中 stats 字段是內部提供的一個狀態對象，根據 statsOptions（dev.stats） 屬性獲取指定的狀態信息。
若是將dev.stats設置爲errors-only，控制檯就不會有這麼多日誌，errors-only屬性值表明只有在代碼打包錯誤時才輸出日誌。
而若是設置爲none，那麼連錯誤日誌都不會再輸出。.
overlay
此屬性是控制代碼打包編譯時出現警告和錯誤時，是否在頁面上顯示錯誤信息。
此屬性在webpack-dev-server@4.0.0beta.0版本具備bug。
在下面Server.js文件中能夠看到使用了clientOverlay屬性，可是在dev對象中並無此屬性。
所需在測試時須要改動一下源碼。將clientOverlay改成overlay。
因此在測試時須要改動一下源碼。將clientOverlay改成overlay。
當overlay屬性值爲true時，若是代碼出現編譯錯誤，會直接在頁面上顯示錯誤信息。
這個功能我的感受還挺好用。不過可能有些人更喜歡使用控制檯查看錯誤信息，也就是dev.stats屬性。
historyApiFallback
此屬性表明在使用 HTML5 API 時是否將全部 無效路由（404） 都跳轉到指定頁面。
相似於項目中將全部 無效路由（404） 轉到 指定404頁面
webpack-dev-server內部使用的是connect-history-api-fallback中間件來作處理，默認跳轉的頁面是index.html。
總結
🐋🐋🐋
- webpack-dev-server是爲了方便開發而提供的一種功能， 利用WebSocket與服務器創建長連接。
- webpack@4.X版本對代碼結構進行了大範圍更改，致使與webpack-dev-server@3.X使用
webpack-dev-server命令會報錯。- webpack-dev-server@4.X版本對devServer屬性根據功能進行了更好的彙總。
本文參考
本文依賴
package.json
{
"name": "my-cli",
"version": "1.0.0",
"main": "index.js",
"author": "mowenjinzhao<yanzhangshuai@126.com>",
"license": "MIT",
"devDependencies": {
"@babel/core": "7.13.1",
"@babel/plugin-transform-runtime": "7.13.7",
"@babel/preset-env": "7.13.5",
"@babel/preset-react": "7.12.13",
"@babel/runtime-corejs3": "7.13.7",
"babel-loader": "8.2.2",
"clean-webpack-plugin": "3.0.0",
"html-webpack-plugin": "5.2.0",
"webpack": "5.24.0",
"webpack-cli": "4.5.0",
"webpack-dev-server": "4.0.0-beta.0",
"webpack-merge": "5.7.3"
},
"dependencies": {
"react": "17.0.1",
"react-dom": "17.0.1"
},
"scripts": {
"start:dev": "webpack-dev-server --config build/webpack.dev.js",
"start": "webpack serve --config build/webpack.dev.js",
"build": "webpack --config build/webpack.pro.js",
},
"browserslist": {
"development": [
"chrome > 75"
],
"production": [
"ie 9"
]
}
}
- 1. 從零學腳手架(五)---react、browserslist
- 2. 從零開始搭建vue腳手架
- 3. mac Vue3.0腳手架從零搭建
- 4. 從零搭建 vue-cli 腳手架
- 5. 從零搭建Spring Boot腳手架（4）：手寫Mybatis通用Mapper
- 6. day 75vue 腳手架學習 腳手架的使用
- 7. 學習從零開始搭建React腳手架
- 8. 用webpack4從零開始構建react腳手架
- 9. vue-cli腳手架使用-- 初學者
- 10. react學習 - 使用react腳手架
- 更多相關文章...
- • TortoiseSVN 使用教程 - SVN 教程
- • Docker 容器使用 - Docker教程
- • Composer 安裝與使用
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策