国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[Webpack并不難]使用教程（四）--- devServer

Anonymous1 / 474人閱讀

摘要：使用教程一，，，使用教程二使用教程三我的版本是官方的文檔在開發(fā)模式下，提供虛擬服務(wù)器，讓我們進(jìn)行開發(fā)和調(diào)試。文檔如果為，開啟虛擬服務(wù)器時(shí)，為你的代碼進(jìn)行壓縮。的警告和錯(cuò)誤是不輸出到終端的。而則作用于請(qǐng)求路徑上的。不想啟用也可以填。

使用教程（一）--- entry，devtool，output，resolve
使用教程（二）--- module.loaders
使用教程（三）--- plugins


我的 Webpack 版本是 3.10.0
DevServer （官方的文檔）

在開發(fā)模式下，DevServer 提供虛擬服務(wù)器，讓我們進(jìn)行開發(fā)和調(diào)試。

而且提供實(shí)時(shí)重新加載。簡(jiǎn)直美滋滋。大大減少開發(fā)時(shí)間。

它不是 webpack 內(nèi)置插件哦，要安裝！！！

// 安裝
npm install webpack-dev-server --save-dev

// 在 package.json 配置下，方便使用。
"scripts": {
    "dev": "webpack-dev-server" // 運(yùn)行命令會(huì)自動(dòng)在node_modules文件夾找 webapck-dev-server模塊。
 }

// webpack.config.js 配置一下 devServer
devServer: {
    clientLogLevel: "warning",
    historyApiFallback: true,
    hot: true,
    compress: true,
    host: "localhost",
    port: 8080
  }

如果沒在 package.json 配置且還是局部安裝，你就要在命令行輸入 node_modules/.bin/webpack-dev-server。若你 package.json 配置好了，在命令行輸入npm run dev。

下面說說 devServer 配置中每一項(xiàng)有什么用。

Hot （文檔）

熱模塊更新作用。即修改或模塊后，保存會(huì)自動(dòng)更新，頁面不用刷新呈現(xiàn)最新的效果。

這不是和 webpack.HotModuleReplacementPlugin （HMR） 這個(gè)插件不是一樣功能嗎？是的，不過請(qǐng)注意了，HMR 這個(gè)插件是真正實(shí)現(xiàn)熱模塊更新的。而 devServer 里配置了 hot: true , webpack會(huì)自動(dòng)添加 HMR 插件。所以模塊熱更新最終還是 HMR 這個(gè)插件起的作用。

host （文檔）

寫主機(jī)名的。默認(rèn) localhost

prot （文檔）

端口號(hào)。默認(rèn) 8080

historyApiFallback （文檔）

如果為 true ，頁面出錯(cuò)不會(huì)彈出 404 頁面。

如果為 {...} , 看看一般里面有什么。

rewrites

rewrites: [
    { from: /^/subpage/, to: "/views/subpage.html" },
    {
      from: /^/helloWorld/.*$/,
      to: function() {
          return "/views/hello_world.html;
      }
    }
]
// 從代碼可以看出 url 匹配正則，匹配成功就到某個(gè)頁面。
// 并不建議將路由寫在這，一般 historyApiFallback: true 就行了。

verbose：如果 true ，則激活日志記錄。

disableDotRule： 禁止 url 帶小數(shù)點(diǎn) . 。

compress (文檔)

如果為 true ，開啟虛擬服務(wù)器時(shí)，為你的代碼進(jìn)行壓縮。加快開發(fā)流程和優(yōu)化的作用。

contentBase （文檔）

你要提供哪里的內(nèi)容給虛擬服務(wù)器用。這里最好填 絕對(duì)路徑。

// 單目錄
contentBase: path.join(__dirname, "public")

// 多目錄
contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")]

默認(rèn)情況下，它將使用您當(dāng)前的工作目錄來提供內(nèi)容。

Open （文檔）

true，則自動(dòng)打開瀏覽器。

overlay (文檔)

如果為 true ，在瀏覽器上全屏顯示編譯的errors或warnings。默認(rèn) false （關(guān)閉）

如果你只想看 error ，不想看 warning。

overlay：{
    errors：true，
    warnings：false
}
quiet （文檔）

true，則終端輸出的只有初始啟動(dòng)信息。 webpack 的警告和錯(cuò)誤是不輸出到終端的。

publicPath （文檔）

配置了 publicPath后， url = "主機(jī)名" + "publicPath配置的" +
"原來的url.path"。這個(gè)其實(shí)與 output.publicPath 用法大同小異。

output.publicPath 是作用于 js, css, img 。而 devServer.publicPath 則作用于請(qǐng)求路徑上的。

// devServer.publicPath
publicPath: "/assets/"

// 原本路徑 --> 變換后的路徑
http://localhost:8080/app.js --> http://localhost:8080/assets/app.js
proxy (文檔)

當(dāng)您有一個(gè)多帶帶的API后端開發(fā)服務(wù)器，并且想要在同一個(gè)域上發(fā)送API請(qǐng)求時(shí)，則代理這些 url 。看例子好理解。

  proxy: {
    "/proxy": {
        target: "http://your_api_server.com",
        changeOrigin: true,
        pathRewrite: {
            "^/proxy": ""
        }
  }

假設(shè)你主機(jī)名為 localhost:8080 , 請(qǐng)求 API 的 url 是 http：//your_api_server.com/user/list

"/proxy"：如果點(diǎn)擊某個(gè)按鈕，觸發(fā)請(qǐng)求 API 事件，這時(shí)請(qǐng)求 url 是http：//localhost:8080/proxy/user/list 。

changeOrigin：如果 true ，那么 http：//localhost:8080/proxy/user/list 變?yōu)?http：//your_api_server.com/proxy/user/list 。但還不是我們要的 url 。

pathRewrite：重寫路徑。匹配 /proxy ，然后變?yōu)?b>"" ，那么 url 最終為 http：//your_api_server.com/user/list 。

watchOptions （文檔）

一組自定義的監(jiān)聽模式，用來監(jiān)聽文件是否被改動(dòng)過。

watchOptions: {
  aggregateTimeout: 300,
  poll: 1000，
  ignored: /node_modules/
}

aggregateTimeout：一旦第一個(gè)文件改變，在重建之前添加一個(gè)延遲。填以毫秒為單位的數(shù)字。

ignored：觀察許多文件系統(tǒng)會(huì)導(dǎo)致大量的CPU或內(nèi)存使用量。可以排除一個(gè)巨大的文件夾。

poll：填以毫秒為單位的數(shù)字。每隔（你設(shè)定的）多少時(shí)間查一下有沒有文件改動(dòng)過。不想啟用也可以填false。

完結(jié)，希望大家喜歡！ 并未完結(jié)，敬請(qǐng)期待！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/92056.html

相關(guān)文章

  • [webpack并不難]總結(jié)

    摘要：剛寫的時(shí)候，心里有很多小聲音寫不好的萬一寫錯(cuò)，誤導(dǎo)別人怎么辦等等。最重要還是感謝你的支持。接下來還會(huì)寫些有趣的東西帶給大家。 這個(gè)教程就此完結(jié)咯，兩周前的一個(gè)念頭也實(shí)現(xiàn)了。剛寫的時(shí)候，心里有很多小聲音： 寫不好的 , 萬一寫錯(cuò)，誤導(dǎo)別人怎么辦 等等。萬事開頭難，寫著寫著就發(fā)現(xiàn)和之前看到的一句話很貼切，輸入一些東西很簡(jiǎn)單的，但你要輸出確實(shí)比較難 。 使用教程（一）--- entry，...

    forrest23 評(píng)論0 收藏0

  • [Webpack并不難]把它當(dāng)人物養(yǎng)成游戲吧。

    摘要：發(fā)覺其實(shí)真的不難，畢竟它是一個(gè)工具，如果用起來都不順手，那為什么那么多人用，是不是。我覺得可以把當(dāng)成人物養(yǎng)成游戲來玩，哦不，來學(xué)。聽說把寶石放進(jìn)這工具就能自動(dòng)更新打包。公司最近弄來了一些未來的文言文，你把它翻譯成現(xiàn)代文吧。 前言 這段可以跳過看下面的。 本來，這個(gè)教程想完結(jié)的了。但回頭看自己寫的，感覺就像寫明了什么意思，具體怎么使用都沒說明白，而且讓人看得會(huì)有點(diǎn)乏味吧。 我也是剛開始...

    andot 評(píng)論0 收藏0

  • webpack4詳細(xì)教程，從無到有搭建react腳手架（一）

    摘要：是一個(gè)現(xiàn)代應(yīng)用程序的靜態(tài)模塊打包器，前端模塊化的基礎(chǔ)。作為一個(gè)前端工程師切圖仔，非常有必要學(xué)習(xí)。官網(wǎng)的文檔非常的棒，中文文檔也非常給力，可以媲美的文檔。建議先看概念篇章，再看指南，然后看和配置總覽。 webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器，前端模塊化的基礎(chǔ)。作為一個(gè)前端工程師（切圖仔），非常有必要學(xué)習(xí)。 showImg(https://segment...

    zhkai 評(píng)論0 收藏0

  • [Webpack并不難]使用教程（三）--- plugins

    摘要：使用教程一，，，使用教程二版本官方的文檔上一篇講到的是被用來轉(zhuǎn)換某些類型的模塊，它則可以用來做更廣泛的任務(wù)。可看作綁定事件，打包時(shí)會(huì)觸發(fā)事件。它的作用是定義全局常量，是常量。為，啟用兩步之間的延遲。請(qǐng)注意，規(guī)范建議始終使用引號(hào)。 使用教程（一）--- entry，devtool，output，resolve使用教程（二）--- module.loadersWebpack版本 3.10...

    Youngs 評(píng)論0 收藏0

  • webpack4 系列教程(十五)：開發(fā)模式與webpack-dev-server

    摘要：作者按因?yàn)榻坛趟緢D片使用的是倉庫圖片，網(wǎng)速過慢的朋友請(qǐng)移步系列教程十五開發(fā)模式與原文地址。而開發(fā)模式就是指定為。在非開發(fā)模式下，需要關(guān)閉此選項(xiàng)，以減小打包體積。在單頁應(yīng)用中，任何響應(yīng)直接被替代為。 作者按：因?yàn)榻坛趟緢D片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請(qǐng)移步《webpack4 系列教程(十五)：開發(fā)模式與 webpack-dev-server》原文地址。更歡迎來我的...

    zengdongbao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<