dev-server.js淺析

// 檢查NodeJS和npm的版本
require('./check-versions')()

// 獲取配置
var config = require('../config')
// 如果Node的環境變量中沒有設置當前的環境（NODE_ENV），則使用config中的配置作為當前的環境
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}

// 一個可以調用默認軟件打開網址、圖片、文件等內容的插件
// 這里用它來調用默認瀏覽器打開dev-server監聽的端口，例如：localhost:8080
var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')

// 一個express中間件，用於將http請求代理到其他服務器
// 例：localhost:8080/api/xxx  -->  localhost:3000/api/xxx
// 這里使用該插件可以將前端開發中涉及到的請求代理到API服務器上，方便與服務器對接
var proxyMiddleware = require('http-proxy-middleware')

// 根據 Node 環境來引入相應的 webpack 配置
var webpackConfig = process.env.NODE_ENV === 'testing'
  ? require('./webpack.prod.conf')
  : require('./webpack.dev.conf')

// dev-server 監聽的端口，默認為config.dev.port設置的端口，即8080
var port = process.env.PORT || config.dev.port

// 用於判斷是否要自動打開瀏覽器的布爾變量，當配置文件中沒有設置自動打開瀏覽器的時候其值為 false
var autoOpenBrowser = !!config.dev.autoOpenBrowser

// 定義 HTTP 代理表，代理到 API 服務器
var proxyTable = config.dev.proxyTable

// 創建1個 express 實例
var app = express()

// 根據webpack配置文件創建Compiler對象
var compiler = webpack(webpackConfig)

// webpack-dev-middleware使用compiler對象來對相應的文件進行編譯和綁定
// 編譯綁定后將得到的產物存放在內存中而沒有寫進磁盤
// 將這個中間件交給express使用之后即可訪問這些編譯后的產品文件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true
})

// webpack-hot-middleware，用於實現熱重載功能的中間件
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  log: () => {}
})

// 當html-webpack-plugin提交之后通過熱重載中間件發布重載動作使得頁面重載
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})

// 將 proxyTable 中的代理請求配置掛在到express服務器上
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  // 格式化options，例如將'www.example.com'變成{ target: 'www.example.com' }
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
})

// handle fallback for HTML5 history API
// 重定向不存在的URL，常用於SPA
app.use(require('connect-history-api-fallback')())

// serve webpack bundle output
// 使用webpack開發中間件
// 即將webpack編譯后輸出到內存中的文件資源掛到express服務器上
app.use(devMiddleware)

// enable hot-reload and state-preserving
// compilation error display
// 將熱重載中間件掛在到express服務器上
app.use(hotMiddleware)

// serve pure static assets
// 靜態資源的路徑
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)

// 將靜態資源掛到express服務器上
app.use(staticPath, express.static('./static'))

// 應用的地址信息，例如：http://localhost:8080
var uri = 'http://localhost:' + port

// webpack開發中間件合法（valid）之后輸出提示語到控制台，表明服務器已啟動
devMiddleware.waitUntilValid(function () {
  console.log('> Listening at ' + uri + '\n')
})

// 啟動express服務器並監聽相應的端口（8080）
module.exports = app.listen(port, function (err) {
  if (err) {
    console.log(err)
    return
  }

  // when env is testing, don't need open it
  // 如果符合自動打開瀏覽器的條件，則通過opn插件調用系統默認瀏覽器打開對應的地址uri
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
})

服務器配置文件