webpack學習記錄 - 學習webpack-dev-server（三）

怎麼用最簡單的方式搭建一個服務器？

首先安裝插件

npm i --save-dev webpack-dev-server

而後修改 packet.json 文件

"scripts": {
    "start": "webpack --mode development",
    "dev": "webpack-dev-server --mode development"
  },

說明：webpack-dev-server --open --mode development   --open的意思是自動完成後會自動打開瀏覽器，而後進入默認的localhost:8080頁面：

服務器的根目錄就是咱們工程的目錄

 

如今直接執行 npm run dev 能夠發現瀏覽器自動打開了一個空的頁面，而且在命令行中也多了新的輸出 

 

webpack-dev-server的配置屬性

1.devServer.contentBase

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

經過配置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輸出的文件只存在於內存中,不輸出真實的文件！

2.devServer.port

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

修改配置爲：

devServer: {
   port:7000
}

這個時候就不是默認的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 （172.30.67.142: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

devServer: {
     contentBase: path.join(__dirname, "dist"),
     historyApiFallback:{
        rewrites:[
           {from:/./,to:'/404.html'}
        ]
     }
 }

打開頁面，當輸入一個不存在的路由地址時就會跳轉到404.html頁面

當 設置   historyApiFallback: true 時則不跳轉

5.devServer.overlay

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

當設置爲true時，在shell裏提示編譯錯誤，但在瀏覽器裏沒有提示。

6.devServer.stats（字符串）

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

 

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

 

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

stats可設置的值還有"minimal"，"normal"，"verbose"

7.devServer.compress

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

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

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

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

 

8.devServer.quiet

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

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

quiet：false（默認）

 

9.devServer.hot和devServer.inline

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

當咱們對業務代碼作了一些修改而後保存後（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
    }
}

 

 

參考地址：https://www.cnblogs.com/penghuwan/p/6941616.html