15_webpack_devServe中的選項
2022-04-25 23:01:18

output的publicPath

output中的path的作用是告知webpack之后的輸出目錄

　　比如靜態資源的jscss等輸出到哪里，常見的會設置為dist、build文件夾

output中還有一個publicPath屬性，該屬性是指index.html文件打包引用的一個基本路徑

　　他的默認值為空字符串，所以我們打包后引入js文件時，路徑是bundle.js

　　在開發環境中，我們也將其設置為/，路徑是/bundle.js那么瀏覽器會根據所在的域名+路徑去請求對應的資源；

　　如果我們希望在本地直接打開html文件來運行，會將其設置為./，路徑是./bundle.js，可以根據相對路徑去查早資源

如：在開發模式下不設置publicPath

?

?

http://localhost:8080+publicPath+bundle.js
就相當于http://loaclhost:8080bundle.js，如果端口后面沒有加 / 有些瀏覽器會幫助我們添加一個 / 最終變成了http://localhost:8080/bundle.js，所以路徑是沒有錯誤的，如果有些瀏覽器不會幫我們加 / 那么我們需要手動去設置，否則就會報404找不到相應的資源

一般腳手架會設置publicPath為 /
路徑：http://localhost:8080/bundle.js，那么就是正確的路徑

?

如果不使用webpack-dev-serve，直接用瀏覽器去打開index.html那么即使你設置publicPath為 / 也是加載不出來的
　　那么我們就需要將publicPath設置為 ./?

?

?

?　　那就意味著它變成了相對路徑了，瀏覽器在加載的時候瀏覽器會解析到是一個相對路徑，它會根據index.html所在的路徑去查找bundle.js這個文件

  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "bundle.js",

    // 在打包之后的靜態資源前面進行一個路徑的拼接
    // bundle -> ./bindle.js
    publicPath: "./",
  },

?

devServe中的static

static的publicpath

相當于以前的devServer中的publicPath

該屬性是指本地服務所在的文件夾，跟SpringMVC中的RequestMapping差不多

它的默認值是 / ，也就是我們直接訪問端口即可訪問其中的資源http://localhost:8080

如果我們將其設置為了 /a，那么我們需要通過http://localhost/a 才能正常訪問對應的打包后的資源

并且這個時候，，我們其中的bundle.js通過http://localhost:8080/bundle.js也是無法訪問的

　　所以必須將output.static.publicPath也設置為/abc
　　建議devServer.static.publicPath于output.publicPath相同

?

static的directory

給index.html文件所引入的靜態資源提供一個服務

相當于以前的devServer中的contentBase

static中directory對于我們直接訪問打包后的資源其實并沒有太大的作用，它的主要作用是如果我們打包后的資源，又依賴于其他的一些資源，那么就需要指定從哪里來查找這個內容

　　如：在index.html中，我們需要依賴一個aaa.js，這個文件放在public文件中；
　　在index.html中，我們應該如何去引入這個文件呢？
　　　　比如diamond是這樣的：<script src="./public/aaa.js"></script>
　　　　但是這樣打包后瀏覽器是無法通過相對路徑去找到這個文件夾的
　　　　所以代碼應該是這樣子的<script src="./aaa.js"></script>
　　　　但是我們如何讓他去查早到這個文件的存在呢？設置static中的directory

它會有一個默認值，默認是映射到public文件夾中去

?

?

?

示例：我靜態文件所在的路徑

?

?

設置相應的directory路徑：絕對路徑

?

?

?那么在npm run serve的時候就可以看到相應的映射路徑

?

?

?在我們的index.html中去引入靜態資源

static.publicPath+靜態資源所在目錄(注意這里不要加相應的directory路徑了)

?

?

?

?當我們通過靜態路徑去查找某個文件的時候其實他跟directory是有關系的，如果我們direcotry設置的是abc文件夾,那么它會去abc文件夾中去查找相應的靜態資源并加載，有優先級的

static中的watch

以前devServer中的watchContentBase

directory中靜態資源，如果發生了改變，它會刷新瀏覽器

通過?static.directory?配置項告訴 dev-server 監聽文件。默認啟用，文件更改將觸發整個頁面重新加載?？梢酝ㄟ^將?watch?設置為?false?禁用。

watch:true

?

hot和hotOnly

webpack5中沒有hotOnly這個屬性了，hot的值為'only'就相當于設置了hotOnly

hot為true時：當模塊中有錯誤，修正的時候，它會刷新整個頁面，那么我們把hotOnly加上就不會導致刷新整個頁面了

?

host

host設置主機地址
　　默認值為localhost;
　　如果希望其他地方也可以訪問，可以設置為0.0.0

localhost和0.0.0.0的區別
　　localhost:本質上是一個域名，通常情況下會被解析成127.0.0.1
　　127.0.0.1：回環地址(Loop Back Address),表達的意思其實是我們主機自己發出去的包被自己接收
　　0.0.0.0：監聽IPV4上所有的地址，再根據端口找到不同的應用程序
　　　　比如我們監聽0.0.0.0時，在同一個網段下的主機中，通過ip地址是可以訪問的

?

port、open、compress

port：設置端口

open：編譯成功自動打開瀏覽器

compress:是否為靜態文件開啟gzip compression:對靜態文件進行壓縮，優化傳輸速度
　　默認值是false,可以設置為true

?

Proxy代理

proxy是開發中常用的一個選項，他的目的是設置代理來解決跨域訪問的問題

協議：主機地址：端口 這三個其中一個不同就形成了跨域問題

那么我們怎么解決跨域問題？
　　我們可以將請求先發送到一個代理服務器，代理服務器和API服務器沒有跨域的問題，就可以解決我們的跨域問題了

下面進行演示：

　　首先需要在項目中安裝一個axios包
　　　npm i axios

　　配置proxy
　　

 devServer: {
    proxy: {
      "/api": "http://localhost:8000",
    },
  },

　　發送網絡請求
　　

　　那么實際請求的路徑就是http://localhost:8000/api/delay

　　如果我們實際的請求路徑是http://localhost:8000/delay
　　那么我們需要這么寫
　　

　　它會把/api給替換成空字符串，那么它實際的請求路徑就變為了http://localhost:8000/delay

npm run serve就不會有跨域問題了

secure

webpack不支持代理https的請求，不會幫你代理到https的
默認情況下，將不接受在 HTTPS 上運行且證書無效的后端服務器。如果需要，請按如下方式修改配置：

他需要進行額外的配置

 proxy: {
      "/api": {
        target: "http://localhost:8000",
        //路徑重寫
        pathRewrite: {
          "^/api": "",
        },
        secure: false,
      },
    },

changeOrigin

修改代理請求中的header中的host屬性

我們真實的請求，其實是需要通過http://localhost:8000來請求的

但是因為使用了代理，默認情況下它的值是：http://localhost:8080
如果服務器沒有進行校驗那么就不會有問題，如果進行校驗那么服務器就會發現源不對就不會返回數據

如果我們需要修改，那么可以將changeOrigin設置為true即可

    proxy: {
      "/api": {
        target: "http://localhost:8000",
        //路徑重寫
        pathRewrite: {
          "^/api": "",
        },
        secure: false,
        // changeOrigin: true,
      },
    },

?

設置前

?

?

設置后

?

?

historyApiFallback

historyApiFallback是開發中一個非常常見的屬性，它主要的作用就是解決SPA頁面在路由跳轉之后，進行頁面刷新是，返回404的錯誤

加入我vue-router使用的是history模式那么在刷新頁面的時候肯定會報404的這么一個錯誤

那么我們就需要加上historyApiFallback:true

那么我們如果瀏覽器報錯404那么就直接返回index.html這個頁面

  devServer: {
    static: {
      directory: path.resolve(__dirname, "./abc"),
      watch: false,
      publicPath: "/a",
    },
    proxy: {
      "/api": {
        target: "http://localhost:8000",
        //路徑重寫
        pathRewrite: {
          "^/api": "",
        },
        secure: false,
        // changeOrigin: true,
      },
    },
    historyApiFallback: {
      //因為我設置了publicPath所以這里要加上publicPath才能映射到index.html
      index: "/a/index.html",
    },
  },

同時你也可以寫一個正則

 historyApiFallback: {
      //因為我設置了publicPath所以這里要加上publicPath才能映射到index.html
      // index: "/index.html",
      rewrites: [{ from: //a//, to: "/a/index.html" }],
    },

根據不同的規則，映射到不同的html頁面中