dev-server.js

require('./check-versions')()   //检查node和npm的版本

    /*获取config/index.js中的默认配置，config后面没有配置项会自动找index.js*/
    var config = require('../config')

    /*如果Node环境无法判断是dev还是product环境则使用config.dev.env.NODE_ENV作为当前执行环境*/
    if (!process.env.NODE_ENV) {
      process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
    }

    var opn = require('opn')    //一个可以强制打开浏览器并跳转到指定url的插件

    var path = require('path')  //使用Node自带的文件路径工具

    var express = require('express')    //使用express

    var webpack = require('webpack')    //使用webpack

    var proxyMiddleware = require('http-proxy-middleware')  //一个Node的代理中间件

    var webpackConfig = process.env.NODE_ENV === 'testing'
          ? require('./webpack.prod.conf')
          : require('./webpack.dev.conf')//根据不同的Node环境加载不同的webpack配置

    // default port where dev server listens for incoming traffic,如果没有指定端口就是用config.dev.port作为运行端口
    var port = process.env.PORT || config.dev.port

    // automatically open browser, if not set will be false根据config.dev.autoOpenBrowser选择是否自动打开浏览器
    var autoOpenBrowser = !!config.dev.autoOpenBrowser

    // Define HTTP proxies to your custom API backend
    // https://github.com/chimurai/http-proxy-middleware
    //使用 config.dev.proxyTable 的配置作为 proxyTable 的代理配置

    var proxyTable = config.dev.proxyTable

    var app = express()//使用express启动一个服务

    var compiler = webpack(webpackConfig)//启动webpack进行编译

    // 启动 webpack-dev-middleware，将 编译后的文件暂存到内存中

    var devMiddleware = require('webpack-dev-middleware')(compiler, {
          publicPath: webpackConfig.output.publicPath,
          quiet: true
    })

    // 启动 webpack-hot-middleware，也就是我们常说的 Hot-reload,https://www.npmjs.com/package/webpack-hot-middleware

    var hotMiddleware = require('webpack-hot-middleware')(compiler, {
          log: () => {},
          heartbeat: 2000
    })

    // 当html-webpack-plugin模板更改时，强制页面重新加载

    compiler.plugin('compilation', function (compilation) {
          compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
                hotMiddleware.publish({ action: 'reload' })
                cb()
          })
    })

    // proxy api requests
   //将 proxyTable 中的请求配置挂在到启动的 express 服务上

    Object.keys(proxyTable).forEach(function (context) {
          var options = proxyTable[context]
          if (typeof options === 'string') {
                options = { target: options }
          }
          app.use(proxyMiddleware(options.filter || context, options))
    })

    // handle fallback for HTML5 history API
    //使用 connect-history-api-fallback 匹配资源，如果不匹配就可以重定向到指定地址
    // https://www.npmjs.com/package/connect-history-api-fallback

    app.use(require('connect-history-api-fallback')())

    // serve webpack bundle output
    //将暂存到内存中的 webpack 编译后的文件挂在到 express 服务上

    app.use(devMiddleware)

    // enable hot-reload and state-preserving
    // compilation error display
    //将 Hot-reload 挂在到 express 服务上

    app.use(hotMiddleware)

    // serve pure static assets
    //拼接 static 文件夹的静态资源路径

    var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)

    app.use(staticPath, express.static('./static'))

    // 让我们这个 express 服务监听 port 的请求，并且将此服务作为 dev-server.js 的接口暴露出去

    var uri = 'http://localhost:' + port

    var _resolve

    var readyPromise = new Promise(resolve => {
      _resolve = resolve
    })

    console.log('> Starting dev server...')

    devMiddleware.waitUntilValid(() => {
          console.log('> Listening at ' + uri + '\n')

          // when env is testing, don't need open it

          // 如果不是测试环境，自动打开浏览器并跳到我们的开发地址

          if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
                opn(uri)
          }
              _resolve()
    })

    var server = app.listen(port)
        module.exports = {
              ready: readyPromise,
              close: () => {
                server.close()
          }
    }