詳解webpack-dev-server的配置屬性

時間 2019-12-10

標籤詳解 webpack dev server 配置屬性简体版

原文原文鏈接

1.devServer.contentBase

它指定了服務器資源的根目錄，若是不寫入contentBase的值，那麼contentBase默認是項目的目錄。

在上面例子中產生錯誤和後來解決錯誤的緣由：

產生錯誤：由於bundle.js被 "放在了"咱們的項目根目錄裏，在dist/html裏<script src="./bundle.js"></script>此時顯然不能根據路徑找到bundle.js

解決錯誤：經過配置contentBase: path.join(__dirname, "dist")將bundle.js "放在了"dist目錄下，此時bundle.js和dist/index.html位於同一目錄下，經過 src="./bundle.js"天然就找到bundle.js了

webpack打包和webpack-dev-server開啓服務的區別——

webpack輸出真實的文件，而webpack-dev-server輸出的文件只存在於內存中,不輸出真實的文件！（注意下面兩張圖的區別）

webpack:當咱們在終端運行"webpack"後：

webpack-dev-server:當咱們在終端運行"node_modules/.bin/webpack-dev-server後：

這也就是我在上面的闡述中將bundle.js"放在了"加上雙引號的緣由

你要提供哪裏的內容給虛擬服務器用。這裏最好填 絕對路徑。

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

// 多目錄
contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")]
默認狀況下，它將使用您當前的工做目錄來提供內容。

2.devServer.port

port配置屬性指定了開啓服務的端口號：

devServer: {
   port:7000
}

設置端口號爲7000:

運行：node_modules/.bin/webpack-dev-server

這個時候就不是默認的8080的端口了，而是咱們設置的7000

3.devServer.host

host設置的是服務器的主機號：

修改配置爲：

devServer: {
   contentBase: path.join(__dirname, "dist"),
   port:7000,
   host:'0.0.0.0'
}

此時localhost:7000和0.0.0.0:7000都能訪問成功

4.devServer.historyApiFallback

在文檔裏面說的很清楚， 這個配置屬性是用來應對返回404頁面時定向到特定頁面用的（the index.html page will likely have to be served in place of any 404 responses)

在dist目錄下新增一個HTML頁面：

/*剩下的都是很常規的HTML內容，故省略*/
<p>這裏是404界面</p>

咱們把webpack.config.js修改以下：

module.exports = {
/*這裏省略entry和output，參照上面寫的內容*/
devServer: {
contentBase: path.join(__dirname, "dist"),
historyApiFallback:{
   rewrites:[
      {from:/./,to:'/404.html'}
   ]
  }
 }
}

打開頁面，輸入一個不存在的路由地址：

若是爲 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 帶小數點 . 。

5.watchOptions （文檔）

一組自定義的監聽模式，用來監聽文件是否被改動過。

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

aggregateTimeout：一旦第一個文件改變，在重建以前添加一個延遲。填以毫秒爲單位的數字。
ignored：觀察許多文件系統會致使大量的CPU或內存使用量。能夠排除一個巨大的文件夾。
poll：填以毫秒爲單位的數字。每隔（你設定的）多少時間查一下有沒有文件改動過。不想啓用也能夠填false。

6.proxy (文檔)

當您有一個單獨的API後端開發服務器，而且想要在同一個域上發送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'：若是點擊某個按鈕，觸發請求 API 事件，這時請求 url 是http：//localhost:8080/proxy/user/list。
changeOrigin：若是 true ，那麼 http：//localhost:8080/proxy/user/list 變爲 http：//your_api_server.com/proxy/user/list 。但還不是咱們要的 url 。
pathRewrite：重寫路徑。匹配 /proxy ，而後變爲'' ，那麼 url 最終爲 http：//your_api_server.com/user/list 。

7.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

8.devServer.overlay

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

若是你只想看 error ，不想看 warning。

overlay：{
    errors：true，
    warnings：false
}

配置屬性用來在編譯出錯的時候，在瀏覽器頁面上顯示錯誤，默認是false，可設置爲true

首先咱們人爲製造一個編譯錯誤：在咱們還沒有配置babel loader的項目裏使用ES6寫法：

在src/index.js裏寫入「const a」

在shell裏提示編譯錯誤：

但在瀏覽器裏沒有提示：

因此咱們把webpack.config.js修改成：

module.exports = {
     /*這裏省略entry和output，參照上面寫的內容*/
   devServer: {
       contentBase: path.join(__dirname, "dist"),
       overlay: true
   }
}

再從新運行node_modules/.bin/webpack-dev-server，瀏覽器上把錯誤顯示出來了

9.devServer.stats（字符串）

這個配置屬性用來控制編譯的時候shell上的輸出內容，咱們沒有設置devServer.stats時候編譯輸出是這樣子的：

（其中看起來有許多看似不重要的文件也被打印出來了）

stats: "errors-only"表示只打印錯誤：

咱們把配置改爲：

devServer: {
   contentBase: path.join(__dirname, "dist"),
   stats: "errors-only"
}

由於只有錯誤才被打印，因此，大多數信息都略過了

除此以外還有"minimal"，"normal"，"verbose"，這裏很少加贅述

10.devServer.quiet

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

當這個配置屬性和devServer.stats屬於同一類型的配置屬性

當它被設置爲true的時候，控制檯只輸出第一次編譯的信息， 當你保存後再次編譯的時候不會輸出任何內容，包括錯誤和警告

來作個對比吧：

quiet：false（默認）：

第一次編譯：

第二次編譯（當你保存的時候）

quiet:truecss

第一次編譯同上

第二次編譯什麼都不輸出

11.devServer.compress

這是一個布爾型的值，當它被設置爲true的時候對全部的服務器資源採用gzip壓縮

採用gzip壓縮的優勢和缺點：

優勢：對JS，CSS資源的壓縮率很高，能夠極大得提升文件傳輸的速率，從而提高web性能

缺點：服務端要對文件進行壓縮，而客戶端要進行解壓，增長了兩邊的負載

12.devServer.hot和devServer.inline

在這以前，首先要說一下的是webpack-dev-server的自動刷新和模塊熱替換機制

webpack-dev-server的自動刷新和模塊熱替換機制 ,這兩個機制是牢牢聯繫在一塊兒的html

從外部角度看——自動刷新

當咱們對業務代碼作了一些修改而後保存後（command+s），頁面會自動刷新，咱們所作的修改會直接同步到頁面上，而不須要咱們刷新頁面，或從新開啓服務

（The webpack-dev-server supports multiple modes to automatically refresh the page）

從內部角度看——模塊熱替換

在熱替換（HMR）機制裏，不是重載整個頁面，HMR程序會只加載被更新的那一部分模塊，而後將其注入到運行中的APP中

（In Hot Module Replacement, the bundle is notified that a change happened. Rather than a full page reload, a Hot Module Replacement runtime could then load the updated modules and inject them into a running app.）

webpack-dev-server有兩種模式能夠實現自動刷新和模塊熱替換機制

1. Iframe mode (默認,無需配置)

頁面被嵌入在一個iframe裏面，而且在模塊變化的時候重載頁面

2.inline mode（需配置）添加到bundle.js中

當刷新頁面的時候，一個小型的客戶端被添加到webpack.config.js的入口文件中

例如在咱們的例子中，在使用inline mode的熱替換後，至關於入口文件從

entry:{
    app:path.join(__dirname,'src','index.js')
}

變成了：

entry:{
    app:[path.join(__dirname,'src','index.js'),
             'webpack-dev-server/client?http://localhost:8080/'
          ]
}

從一個入口變成了兩個入口，並實現刷新

那怎麼才能inline mode模式的刷新呢？

你須要作這些：

1在配置中寫入devServer.hot：true和devServer.inline：true

2增長一個插件配置webpack.HotModuleReplacementPlugin()

例如：

var webpack = require('webpack')
module.exports = {
   /*省略entry ,output等內容*/
   plugins:[
        new webpack.HotModuleReplacementPlugin()
    ],
   devServer: {
        inline:true,
        hot:true
    }
}

打開頁面：

若是有上面兩行輸出則代表你已經配置成功

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。