webpack5之devServer的常用配置詳解
前言
devServer
是為開發過程中, 開啟的一個本地服務,在此總結一些常用的配置。供大傢學習,相互成長,相互進步!
一. contentBase
devServer
中contentBase
對於我們直接訪問打包後的資源其實並沒有太大的作用,但如果我們打包後的資源,又依賴於其他的一些資源,那麼就需要指定從哪裡來查找這個內容,這時候就需要配置contentBase
舉例:
module.exports = { mode: "development", entry: "./src/index.js", output: { filename: "bundle.js", // 打包後的文件的輸出目錄 path: path.resolve(__dirname, "./build"), publicPath: "/abc", }, // 專門為webpack-dev-server // devServer為開發過程中, 開啟一個本地服務 devServer: { publicPath: "/abc", } }
如上方圖所示設置"./why/abc.js"
,但是這樣webpack serve
打包後瀏覽器是無法通過相對路徑去找到這個文件夾的
所以應設置為如下:
module.exports = { mode: "development", entry: "./src/index.js", output: { filename: "bundle.js", // 打包後的文件的輸出目錄 path: path.resolve(__dirname, "./build"), publicPath: "/abc", }, // 專門為webpack-dev-server // devServer為開發過程中, 開啟一個本地服務 devServer: { ** contentBase: path.resolve(__dirname, "./why"), ** watchContentBase: true, //實時監聽contentBase文件變化 publicPath: "/abc", } }
二. hotOnly、hot、host配置
1. hotOnly、hot
hot 啟用 webpack 的 熱模塊替換 特性:
module.exports = { //... devServer: { hot: true, }, };
啟用熱模塊替換功能,在構建失敗時不刷新頁面作為回退,使用 hot: 'only' 或hotOnly:true
:
module.exports = { //... devServer: { hot: 'only', //hotOnly: true, }, };
2. host設置主機地址
默認值是localhost; 如果希望其他地方也可以訪問,可以設置為 0.0.0.0;
提示: localhost 和 0.0.0.0 的區別:
localhost:
本質上是一個域名,通常情況下會被解析成127.0.0.1;
127.0.0.1:
回環地址(Loop Back Address),表達的意思其實是我們主機自己發出去的包,直接被自己接收;
- 正常的數據庫包經常 應用層 – 傳輸層 – 網絡層 – 數據鏈路層 – 物理層 ;
- 而回環地址,是在網絡層直接就被獲取到瞭,是不會經常數據鏈路層和物理層的;
- 比如我們監聽 127.0.0.1時,在同一個網段下的主機中,通過ip地址是不能訪問的;
0.0.0.0:
監聽IPV4上所有的地址,再根據端口找到不同的應用程序;
- 比如我們監聽 0.0.0.0時,在同一個網段下的主機中,通過ip地址是可以訪問的
三. port、open、compress
port:
設置監聽的端口,默認情況下是8080,不能設置為null
,可以設置自動為auto
module.exports = { //... devServer: { port: 8080, }, };
open:
告訴 dev-server 在服務器已經啟動後打開瀏覽器。設置其為 true
以打開你的默認瀏覽器。
module.exports = { //... devServer: { open: true, //在瀏覽器中打開指定頁面:open: ['/my-page'] //提供要使用的瀏覽器名稱,而不是默認名稱 // open: { // app: { // name: 'google-chrome', // }, // }, }, };
compress:
是否為靜態文件開啟gzip compression:
module.exports = { //... devServer: { compress: true, }, };
四. Proxy代理
Proxy
是我們開發中非常常用的一個配置選項,它的目的設置代理來解決跨域訪問的問題。
舉例:
我們的一個api
請求是 http://localhost:8888,但是本地啟動服務器的域名是 http://localhost:8000, 這個時候發送網絡請求就會出現跨域的問題。 所以將請求先發送到一個代理服務器,代理服務器和API服務器沒有跨域的問題,就可以解決我們的跨域問題瞭。
module.exports = { //... devServer: { proxy: { '/api': { target: 'http://localhost:8888', pathRewrite: { "^/api": "" }, secure: false, changeOrigin: true, }, }, }, };
target:
表示的是代理到的目標地址,比如 /api
會被代理到 http://localhost:8888/api
pathRewrite:
默認情況下,我們的 /api
也會被寫入到URL中,即:http://localhost:8888/api, 如果希望刪除,可以使用pathRewrite
;
secure:
默認情況下,將不接受在 HTTPS 上運行且證書無效的後端服務器。 如果希望支持,可以設置為false;
changeOrigin:
它表示是否更新代理後請求的headers中host地址,一般設置為true
五. historyApiFallback
historyApiFallback
是開發中一個非常常見的屬性,它主要的作用是解決SPA頁面在路由跳轉之後,進行頁面刷新 時,返回404的錯誤。
- 配置 boolean值:默認是false
module.exports = { devServer: { //如果設置為true,那麼在刷新時,返回404錯誤時,會自動返回 index.html 的內容; historyApiFallback: true, }, };
- 配置 object類型的值,設置rewrites屬性: 可以配置from來匹配路徑,決定要跳轉到哪一個頁面;
module.exports = { //... devServer: { historyApiFallback: { rewrites: [ { from: /^/$/, to: '/views/landing.html' }, { from: /^/subpage/, to: '/views/subpage.html' }, { from: /./, to: '/views/404.html' }, ], }, }, };
devServer中實現historyApiFallback功能是通過connect-history-api-fallback庫的: For more options and information,查看 connect-history-api-fallback 文檔
以上就是webpack5之devServer的常用配置詳解的詳細內容,更多關於webpack5 devServer配置的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- webpack中的代理配置詳解
- webpack5之output和devServer的publicPath區別示例詳解
- webpack-dev-server搭建本地服務器的實現
- webpack-dev-server核心概念案例詳解
- webpack-dev-server的安裝使用教程