建站
咨詢
售后
建站咨詢
新聞中心
事情是這樣的，前兩天有個小伙伴問我：「為啥我的 webpack 運(yùn)行完看不到我寫的頁面，而是：」
創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比靈石網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式靈石網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋靈石地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。
嗯?文件列表頁?好吧，這種情況我似乎沒遇到過，一下子沒法給出答案，只能要來關(guān)鍵代碼：
重點(diǎn)看看 webpack.config.js 配置，用到 devServer + HMR 功能，其中：
- Webpack 版本為 5.37.0
- webpack-dev-server 版本為 3.11.2
看了半天，沒問題呀，給了幾個紙糊的建議還是解決不了問題，剛好在開會這事就暫且放下了。過了一會，小伙伴興沖沖跑過來跟我說經(jīng)過一番盲猜，問題被解決了：
- output.publicPath = '/' 時一切正常
- output.publicPath = './' 時出錯，返回文件列表頁
啊?這玩意還會影響 devServer 的效果，直覺告訴我不應(yīng)該啊。
emmm，成功勾起我的好奇心了，雖然寫過一些 Webpack 源碼分析的文章，但 webpack-dev-server 確實(shí)不在我的知識范圍，好在我有秘籍《如何閱讀源碼 —— 以 Vetur 為例》，是時候展示真正的技術(shù)了!
第一步：定義問題
先復(fù)盤一下問題發(fā)生的過程：
- webpack.config.js 同時配置了 ouput.publicPath 與 devServer
- 運(yùn)行 npx webpack serve 啟動開發(fā)服務(wù)器
- 瀏覽器訪問 http://localhost:9000 沒有按預(yù)期返回用戶代碼，而是返回了文件列表頁面;但如果恢復(fù) output.publicPath 的默認(rèn)配置，一切如常
講道理， ouput.publicPath 應(yīng)該只是影響了最終產(chǎn)物引用的路徑，試試命令行工具運(yùn)行 curl 檢測首頁返回的內(nèi)容：
Tips：有時候可以試試?yán)@過瀏覽器的復(fù)雜邏輯，用最簡單的工具驗(yàn)證 http 請求返回的內(nèi)容。
可以看到，請求 http://localhost:9000 地址返回一大串 html 代碼，且頁面的 title 為 listing directory —— 也就是我們看到的文件列表頁面：
雖然不知道這是在那一層生成的，但可以肯定絕對不是我寫的，而且這是在 HTTP 層面發(fā)生的。
所以問題的核心就是：「為何 Webpack 的 output.publicPath 會影響 webpack-dev-server 的運(yùn)行效果」?
第二步：回顧背景
帶著問題我又 review 了一遍 Webpack 官方文檔。
publicPath配置
首先 output.publicPath 是這么描述的：
This is an important option when using on-demand-loading or loading external resources like images, files, etc. If an incorrect value is specified you'll receive 404 errors while loading these resources.
大意就是，這是一個控制按需加載或資源文件加載的選項(xiàng)，如果對應(yīng)的路徑資源加載失敗時會返回 404。
嗐，其實(shí)這段描述就非常不明所以了，簡單理解 output.publicPath 會改變產(chǎn)物資源在 html 文件的路徑，比如說 Webpack 編譯完生成了 bundle.js 文件，默認(rèn)情況下寫到 html 的路徑是：