webpack-devServer的詳細配置

目錄結構：

  // 開發服務器環境
  devServer: {
    // 運行代碼的目錄
    contentBase: resolve(__dirname, "build"),
    // 端口號
    port: 3000,
    // 自動打開瀏覽器
    open: true
  },

1>  host域名的配置

host: "127.0.0.1",

2> compress啟動壓縮

配置compress進行服務啟動壓縮，開啟gzip的壓縮，開啟 gzip之后，內容是原來的21%體積

  compress: true

3> watchContentBase監聽目錄

告訴 dev-server 監聽選項提供的文件。 默認情況下禁用。 啟用后，文件更改將觸發整個頁面重新加載

 watchContentBase: true,

4>  watchOptions監聽配置

 watchOptions: {
    // 忽略監聽的文件內容
    ignored: /node_modules/
  }

5> clientLogLevel客戶端日志

可能會導致日志過於冗余，可以通過將其設置為 'silent' 來關閉日志

 // 客戶端信息的配置
  clientLogLevel: "silent"

6>  stats編輯器信息管理

如果需要一些捆綁軟件信息，但又不是全部，這可能是一個很好的中間立場。

可能的配置'none' | 'errors-only' | 'minimal' | 'normal' | 'verbose' object

比如值拋出錯誤信息

 stats: 'errors-only',

7>  quiet的靜謐狀態

除了顯示初始信息之外，什么都不會寫入編輯器控制台。 這也意味着來自webpack的錯誤或警告是不可見的。

 quiet :true

8> proxy的代理

當擁有單獨的 API 后端開發服務器並且希望在同一域上發送 API 請求時，代理某些 URL 可能會很有用。

使用后端在 localhost:3000 上，可以使用它來啟用代理：

 devServer: {
    proxy: {
      '/api': 'http://localhost:3000',
    },
  },

現在，對 /api/users 的請求會將請求代理到 http://localhost:3000/api/users。

如果不希望傳遞/api，則需要重寫路徑：

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

默認情況下，將不接受在 HTTPS 上運行且證書無效的后端服務器。 如果需要，可以這樣修改配置：

  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false,
      },
    },
  },

有時不想代理所有內容。 可以基於函數的返回值繞過代理。

在該功能中，可以訪問請求，響應和代理選項。

• 返回 null 或 undefined 以繼續使用代理處理請求。
• 返回 false 會為請求產生 404 錯誤。
• 返回提供服務的路徑，而不是繼續代理請求。

devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        bypass: function (req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.');
            return '/index.html';
          }
        },
      },
    },
  },

如果想將多個特定路徑代理到同一目標，則可以使用一個或多個帶有 context 屬性的對象的數組：

 devServer: {
    proxy: [
      {
        context: ['/auth', '/api'],
        target: 'http://localhost:3000',
      },
    ],
  },

默認情況下不會代理對 root 的請求。 要啟用根代理，應將 devMiddleware.index 選項指定為虛假值：

devServer: {
    devMiddleware: {
      index: false, // specify to enable root proxying
    },
    proxy: {
      context: () => true,
      target: 'http://localhost:1234',
    },
  },

代理時會保留主機頭的來源，可以將 changeOrigin 設置為 true 以覆蓋此行為:

 devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },