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

Anonymous1 發(fā)布于2019-08-22 11:15 / 539人閱讀

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

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

我的 Webpack 版本是 3.10.0

DevServer （官方的文檔）

在開發(fā)模式下，DevServer 提供虛擬服務器，讓我們進行開發(fā)和調試。

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

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

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

// 在 package.json 配置下，方便使用。
"scripts": {
    "dev": "webpack-dev-server" // 運行命令會自動在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 配置中每一項有什么用。

Hot （文檔）

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

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

host （文檔）

寫主機名的。默認 localhost

prot （文檔）

端口號。默認 8080

historyApiFallback （文檔）

如果為 true ，頁面出錯不會彈出 404 頁面。

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

rewrites

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

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

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

compress (文檔)

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

contentBase （文檔）

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

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

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

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

Open （文檔）

true，則自動打開瀏覽器。

overlay (文檔)

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

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

overlay：{
    errors：true，
    warnings：false
}

quiet （文檔）

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

publicPath （文檔）

配置了 publicPath后， url = "主機名" + "publicPath配置的" +
"原來的url.path"。這個其實與 output.publicPath 用法大同小異。

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

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

// 原本路徑 --> 變換后的路徑
http://localhost:8080/app.js --> http://localhost:8080/assets/app.js

proxy (文檔)

當您有一個多帶帶的API后端開發(fā)服務器，并且想要在同一個域上發(fā)送API請求時，則代理這些 url ?？蠢雍美斫?。

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

假設你主機名為 localhost:8080 , 請求 API 的 url 是 http：//your_api_server.com/user/list

"/proxy"：如果點擊某個按鈕，觸發(fā)請求 API 事件，這時請求 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)聽文件是否被改動過。

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

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

ignored：觀察許多文件系統(tǒng)會導致大量的CPU或內(nèi)存使用量?？梢耘懦粋€巨大的文件夾。

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

~~完結，希望大家喜歡！~~ 并未完結，敬請期待！

云服務器 GPU云服務器 webpack教程 webpack使用 webpack4教程 webpack 使用公用cdn

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

轉載請注明本文地址：http://m.hztianpu.com/yun/92056.html

[webpack并不難]總結

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

forrest23 2019-08-22 11:18 評論0 收藏0
[Webpack并不難]把它當人物養(yǎng)成游戲吧。

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

andot 2019-08-22 11:17 評論0 收藏0
webpack4詳細教程，從無到有搭建react腳手架（一）

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

zhkai 2019-08-23 18:35 評論0 收藏0
[Webpack并不難]使用教程（三）--- plugins

摘要：使用教程一，，，使用教程二版本官方的文檔上一篇講到的是被用來轉換某些類型的模塊，它則可以用來做更廣泛的任務?？煽醋鹘壎ㄊ录虬鼤r會觸發(fā)事件。它的作用是定義全局常量，是常量。為，啟用兩步之間的延遲。請注意，規(guī)范建議始終使用引號。使用教程（一）--- entry，devtool，output，resolve使用教程（二）--- module.loadersWebpack版本 3.10...

Youngs 2019-08-22 13:40 評論0 收藏0
webpack4 系列教程(十五)：開發(fā)模式與webpack-dev-server

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

zengdongbao 2019-08-23 12:27 評論0 收藏0