15_webpack_devServe中的選項(xiàng)
2022-04-25 23:01:18

output的publicPath

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

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

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

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

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

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

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

?

?

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

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

?

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

?

?

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

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

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

?

devServe中的static

static的publicpath

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

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

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

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

并且這個(gè)時(shí)候，，我們其中的bundle.js通過(guò)http://localhost:8080/bundle.js也是無(wú)法訪問(wèn)的

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

?

static的directory

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

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

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

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

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

?

?

?

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

?

?

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

?

?

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

?

?

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

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

?

?

?

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

static中的watch

以前devServer中的watchContentBase

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

通過(guò)?static.directory?配置項(xiàng)告訴 dev-server 監(jiān)聽(tīng)文件。默認(rèn)啟用，文件更改將觸發(fā)整個(gè)頁(yè)面重新加載。可以通過(guò)將?watch?設(shè)置為?false?禁用。

watch:true

?

hot和hotOnly

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

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

?

host

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

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

?

port、open、compress

port：設(shè)置端口

open：編譯成功自動(dòng)打開(kāi)瀏覽器

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

?

Proxy代理

proxy是開(kāi)發(fā)中常用的一個(gè)選項(xiàng)，他的目的是設(shè)置代理來(lái)解決跨域訪問(wèn)的問(wèn)題

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

那么我們?cè)趺唇鉀Q跨域問(wèn)題？
　　我們可以將請(qǐng)求先發(fā)送到一個(gè)代理服務(wù)器，代理服務(wù)器和API服務(wù)器沒(méi)有跨域的問(wèn)題，就可以解決我們的跨域問(wèn)題了

下面進(jìn)行演示：

　　首先需要在項(xiàng)目中安裝一個(gè)axios包
　　　npm i axios

　　配置proxy
　　

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

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

　　那么實(shí)際請(qǐng)求的路徑就是http://localhost:8000/api/delay

　　如果我們實(shí)際的請(qǐng)求路徑是http://localhost:8000/delay
　　那么我們需要這么寫(xiě)
　　

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

npm run serve就不會(huì)有跨域問(wèn)題了

secure

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

他需要進(jìn)行額外的配置

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

changeOrigin

修改代理請(qǐng)求中的header中的host屬性

我們真實(shí)的請(qǐng)求，其實(shí)是需要通過(guò)http://localhost:8000來(lái)請(qǐng)求的

但是因?yàn)槭褂昧舜恚J(rèn)情況下它的值是：http://localhost:8080
如果服務(wù)器沒(méi)有進(jìn)行校驗(yàn)?zāi)敲淳筒粫?huì)有問(wèn)題，如果進(jìn)行校驗(yàn)?zāi)敲捶?wù)器就會(huì)發(fā)現(xiàn)源不對(duì)就不會(huì)返回?cái)?shù)據(jù)

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

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

?

設(shè)置前

?

?

設(shè)置后

?

?

historyApiFallback

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

加入我vue-router使用的是history模式那么在刷新頁(yè)面的時(shí)候肯定會(huì)報(bào)404的這么一個(gè)錯(cuò)誤

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

那么我們?nèi)绻麨g覽器報(bào)錯(cuò)404那么就直接返回index.html這個(gè)頁(yè)面

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

同時(shí)你也可以寫(xiě)一個(gè)正則

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

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