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

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

個人 Webpack 版本是 3.10.0

DevServer （官方的文檔）

• 在開發模式下，DevServer 提供虛擬服務器，讓咱們進行開發和調試。
• 並且提供實時從新加載。簡直美滋滋。大大減小開發時間。
• 它不是 webpack 內置插件哦，要安裝！！！

// 安裝
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
  }

1. 若是沒在 package.json 配置且仍是局部安裝，你就要在命令行輸入 node_modules/.bin/webpack-dev-server。若你 package.json 配置好了，在命令行輸入npm run dev。
2. 下面說說 devServer 配置中每一項有什麼用。

Hot （文檔）

• 熱模塊更新做用。即修改或模塊後，保存會自動更新，頁面不用刷新呈現最新的效果。
• 這不是和 webpack.HotModuleReplacementPlugin （HMR） 這個插件不是同樣功能嗎？是的，不過請注意了，HMR 這個插件是真正實現熱模塊更新的。而 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 帶小數點 . 。

compress (文檔)

• 若是爲 true ，開啓虛擬服務器時，爲你的代碼進行壓縮。加快開發流程和優化的做用。

contentBase （文檔）

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

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

• 默認狀況下，它將使用您當前的工做目錄來提供內容。

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後端開發服務器，而且想要在同一個域上發送API請求時，則代理這些 url 。看例子好理解。

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

1. 假設你主機名爲 localhost:8080 , 請求 API 的 url 是 http：//your_api_server.com/user/list
2. '/proxy'：若是點擊某個按鈕，觸發請求 API 事件，這時請求 url 是http：//localhost:8080/proxy/user/list 。
3. changeOrigin：若是 true ，那麼 http：//localhost:8080/proxy/user/list 變爲 http：//your_api_server.com/proxy/user/list 。但還不是咱們要的 url 。
4. pathRewrite：重寫路徑。匹配 /proxy ，而後變爲'' ，那麼 url 最終爲 http：//your_api_server.com/user/list 。

watchOptions （文檔）

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

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

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

---

完結，但願你們喜歡！ 並未完結，敬請期待！