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

output的publicPath

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

　　比如靜態(tài)資源的jscss等輸出到哪里，常見的會設(shè)置為dist、build文件夾

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

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

　　在開發(fā)環(huán)境中，我們也將其設(shè)置為/，路徑是/bundle.js那么瀏覽器會根據(jù)所在的域名+路徑去請求對應(yīng)的資源；

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

如：在開發(fā)模式下不設(shè)置publicPath

?

?

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

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

?

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

?

?

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

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

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

?

devServe中的static

static的publicpath

相當(dāng)于以前的devServer中的publicPath

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

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

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

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

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

?

static的directory

給index.html文件所引入的靜態(tài)資源提供一個服務(wù)

相當(dāng)于以前的devServer中的contentBase

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

　　如：在index.html中，我們需要依賴一個aaa.js，這個文件放在public文件中；
　　在index.html中，我們應(yīng)該如何去引入這個文件呢？
　　　　比如diamond是這樣的：<script src="./public/aaa.js"></script>
　　　　但是這樣打包后瀏覽器是無法通過相對路徑去找到這個文件夾的
　　　　所以代碼應(yīng)該是這樣子的<script src="./aaa.js"></script>
　　　　但是我們?nèi)绾巫屗ゲ樵绲竭@個文件的存在呢？設(shè)置static中的directory

它會有一個默認(rèn)值，默認(rèn)是映射到public文件夾中去

?

?

?

示例：我靜態(tài)文件所在的路徑

?

?

設(shè)置相應(yīng)的directory路徑：絕對路徑

?

?

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

?

?

?在我們的index.html中去引入靜態(tài)資源

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

?

?

?

?當(dāng)我們通過靜態(tài)路徑去查找某個文件的時候其實他跟directory是有關(guān)系的，如果我們direcotry設(shè)置的是abc文件夾,那么它會去abc文件夾中去查找相應(yīng)的靜態(tài)資源并加載，有優(yōu)先級的

static中的watch

以前devServer中的watchContentBase

directory中靜態(tài)資源，如果發(fā)生了改變，它會刷新瀏覽器

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

watch:true

?

hot和hotOnly

webpack5中沒有hotOnly這個屬性了，hot的值為'only'就相當(dāng)于設(shè)置了hotOnly

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

?

host

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

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

?

port、open、compress

port：設(shè)置端口

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

compress:是否為靜態(tài)文件開啟gzip compression:對靜態(tài)文件進行壓縮，優(yōu)化傳輸速度
　　默認(rèn)值是false,可以設(shè)置為true

?

Proxy代理

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

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

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

下面進行演示：

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

　　配置proxy
　　

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

　　發(fā)送網(wǎng)絡(luò)請求
　　

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

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

　　它會把/api給替換成空字符串，那么它實際的請求路徑就變?yōu)榱薶ttp://localhost:8000/delay

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

secure

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

他需要進行額外的配置

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

changeOrigin

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

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

但是因為使用了代理，默認(rèn)情況下它的值是：http://localhost:8080
如果服務(wù)器沒有進行校驗?zāi)敲淳筒粫袉栴}，如果進行校驗?zāi)敲捶?wù)器就會發(fā)現(xiàn)源不對就不會返回數(shù)據(jù)

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

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

?

設(shè)置前

?

?

設(shè)置后

?

?

historyApiFallback

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

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

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

那么我們?nèi)绻麨g覽器報錯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: {
      //因為我設(shè)置了publicPath所以這里要加上publicPath才能映射到index.html
      index: "/a/index.html",
    },
  },

同時你也可以寫一個正則

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

根據(jù)不同的規(guī)則，映射到不同的html頁面中