webpack-dev-server 配置屬性

眾所周知webpack-dev-server有三種配置方式，有配置檔案方式、package.json方式和純node的API實現方式，桃子叔叔推薦使用的是第一種：webpack.config.js輸出物件中的devServer屬性中寫配置。其中的原因也是很簡單，這種方式最有利於大型前端專案的部署和後期維護，為什麼呢？balabalabala～～～～～～，桃子叔叔很任性的告訴你這麼簡單的問題就不多廢話了。

這篇部落格主要介紹 webpack-dev-server常用的配置屬性，幾乎涵蓋了所有我們專案中能使用到的，如果小盆友們想檢視所有的屬性，點選這裡：

首先看一下devServer的一個專案中使用的實際例子：

devServer: {
    contentBase: "./",//本地伺服器所載入的頁面所在的目錄
    historyApiFallback: true,//不跳轉
    host:'0.0.0.0',
    port:7000,
    hot:true,
    inline: true,//實時重新整理
    hot:true,//Enable webpack's Hot Module Replacement feature
    compress
 
:true,//Enable gzip compression for everything served
    overlay: true, //Shows a full-screen overlay in the browser
    stats: "errors-only" ,//To show only errors in your bundle
    open:true, //When open is enabled, the dev server will open the browser.
    proxy: {
        "/api": {
            target: "http://localhost:3000"
 
,
            pathRewrite: {"^/api" : ""}
        }
    }，//重定向
 }

接下來我們根據上面的實際例子逐條解析，balabalabala～～～開始了：

1、contentBase

Tell the server where to serve content from. This is only necessary if you want to serve static files. devServer.publicPath will be used to determine where the bundles should be served from, and takes precedence.

用於告訴伺服器檔案的根目錄。這主要用來需要引用靜態檔案的時候。devServer.publicPath被用來規定變異檔案的路徑地址，在下面將詳細介紹

By default it will use your current working directory to serve content, but you can modify this to another directory:

預設情況下就是當前工作的資料夾地址，但是可以修改為其他的地址

contentBase: path.join(__dirname, "public")

2、historyApiFallback

When using the HTML5 History API, the index.html page will likely have to be served in place of any 404 responses. Enable this by passing:

這個配置屬性是用來應對返回404頁面時定向到特定頁面用的

By passing an object this behavior can be controlled further using options like rewrites:

語法是向historyApiFallback物件中的rewrites屬性傳一個物件格式，如下：

historyApiFallback:{
   rewrites:[
      {from:/./,to:'/404.html'}
   ]
  }

3、host

Specify a host to use. By default this is localhost. If you want your server to be accessible externally, specify it like this:

設定伺服器的主機號，預設是localhost，但是可以自己進行設定，如：

host: "0.0.0.0"

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

4、port

Specify a port number to listen for requests on:

設定埠號，如下面的7000

devServer: {
   port:7000
}

5、hot 和 inline

自動重新整理和模組熱替換機制

5.1 hot

Enable webpack’s Hot Module Replacement feature:

熱模組替換機制

hot: true

Note that webpack.HotModuleReplacementPlugin is required to fully enable HMR. If webpack or webpack-dev-server are launched with the –hot option, this plugin will be added automatically, so you may not need to add this to your webpack.config.js.

注意，如果你的專案中使用了熱模組替換機制，HotModuleReplacementPlugin外掛會自動新增到專案中，而不需要再在配置檔案中做新增。

5.2 inline

Toggle between the dev-server’s two different modes. By default the application will be served with inline mode enabled. This means that a script will be inserted in your bundle to take care of live reloading, and build messages will appear in the browser console.

webpack-dev-server有兩種模式可以實現自動重新整理和模組熱替換機制
1. Iframe mode(預設,無需配置)
頁面被嵌入在一個iframe裡面，並且在模組變化的時候過載頁面
2.inline mode（需配置）新增到bundle.js中
當重新整理頁面的時候，一個小型的客戶端被新增到webpack.config.js的入口檔案中

6、compress

這是一個布林型的值，當它被設定為true的時候對所有的伺服器資源採用gzip壓縮
採用gzip壓縮的優點和缺點：

• 優點：對JS，CSS資源的壓縮率很高，可以極大得提高檔案傳輸的速率，從而提升web效能
• 缺點：服務端要對檔案進行壓縮，而客戶端要進行解壓，增加了兩邊的負載

7、overlay

Shows a full-screen overlay in the browser when there are compiler errors or warnings. Disabled by default. If you want to show only compiler errors:

用於在瀏覽器輸出編譯錯誤的，預設是關閉的，需要手動開啟：

overlay: true

如果你想江warnings一同打印出來，可設定：

overlay: {
  warnings: true,
  errors: true
}

8、stats

This option lets you precisely control what bundle information gets displayed. This can be a nice middle ground if you want some bundle information, but not all of it.

這個配置屬性用來控制編譯的時候shell上的輸出內容，因為我們並不需要所有的內容，而只是需要部分的如errors等

To show only errors in your bundle:

在shell中只輸出errors：

stats: "errors-only"

9、open

When open is enabled, the dev server will open the browser.

當open選項被設定為true時，dev server將直接開啟瀏覽器

10、proxy

Proxying some URLs can be useful when you have a separate API backend development server and you want to send API requests on the same domain.

重定向是解決跨域的好辦法，當後端的介面擁有獨立的API，而前端想在同一個domain下訪問介面的時候，可以通過設定proxy實現。

如果後端介面地址是10.10.10.10:3000,你可以這樣設定：

proxy: {
  "/api": "http://10.10.10.10:3000"
}

一個 “/api/users”地址的請求將被重定向到”http://10.10.10.10:3000/api/users“,如果不希望”api”在傳遞中被傳遞過去，可以使用rewrite的方式實現：

proxy: {
  "/api": {
    target: "http://localhost:3000",
    pathRewrite: {"^/api" : ""}
  }
}

11、publicPath

The bundled files will be available in the browser under this path.
Imagine that the server is running under http://localhost:8080 and output.filename is set to bundle.js. By default the publicPath is “/”, so your bundle is available as http://localhost:8080/bundle.js.

用於設定編譯後文件的路徑，假設伺服器的執行地址是 http://localhost:8080，輸出檔名設定為bundle.js，那麼預設情況下publicPath是”/”，因此檔案地址為http://localhost:8080/bundle.js 如果想要設定為別的路徑可以這樣：

publicPath: "/assets/"

Make sure publicPath always starts and ends with a forward slash.

確保publicPath的書寫規則：前後都有一個斜槓！