vue-cli足場buildディレクトリ中のdev-server.js配置ファイルを詳しく説明してください。

本文のシステムはvue-cli足場のbuildディレクトリの中のdev-server.jsの配置ファイルを説明します。
1.このプロファイルはnpm run devとnpm run startの入口配置ファイルで、主に環境開発に使われます。
2.これはシステムの設定ファイルですので、モジュールとプラグインが多く含まれます。この部分は複数の文章に分けて解説します。他のブログの記事に注目してください。
3.コメントについて・より複雑な説明がある場合は、（1）のように、それぞれの注釈モジュールに説明を書きますので、自分で確認してください。
4.コードを付ける

//   check-versions.js  ，         ，        node npm        
//   check-versions      check-versions     
require('./check-versions')()
//   config    index.js    ，                          
//   index.js           index.js     
var config = require('../config')
//                 NODE_ENV，  NODE_ENV   "development"
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}
// opn            ，                 opn(url)
var opn = require('opn')
// nodejs    
var path = require('path')
// nodejs    express，      ，          
var express = require('express')
//   webpack  ，    webpack    
var webpack = require('webpack')
//   http-proxy-middleware  ，                   ，             api
var proxyMiddleware = require('http-proxy-middleware')
//        ，    testing     webpack.dev.conf.js    
//   webpack.dev.conf.js             ，       ，        
var webpackConfig = process.env.NODE_ENV === 'testing' ?
  require('./webpack.prod.conf') :
  require('./webpack.dev.conf')

// default port where dev server listens for incoming traffic
//    webpack-dev-server       ，      process.env.PORT，         config.dev.port 8080
var port = process.env.PORT || config.dev.port
  // automatically open browser, if not set will be false
//    true,    ，    true   !!     ，   vue       
var autoOpenBrowser = !!config.dev.autoOpenBrowser
  // Define HTTP proxies to your custom API backend
  // https://github.com/chimurai/http-proxy-middleware
//                 ，  config  index.js      ，    
var proxyTable = config.dev.proxyTable
//      node.js express       ，        ，   node.js  
var app = express()
//         webpack   ，        ，             ，     ，              compilation，compile，after-emit   
var compiler = webpack(webpackConfig)
//    webpack-dev-middleware webpack-hot-middleware   ，        
//  vue                  ，   (1) (2)
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true //   friendly-errors-webpack-plugin         true，     wepback-dev-config.js
})

var hotMiddleware = require('webpack-hot-middleware')(compiler, {
    log: () => {} //   friendly-errors-webpack-plugin         true，     wepback-dev-config.js
  })
  // force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function(compilation) {
  // webpack       plugin    ，          ，              ，        
  compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) {
    //    html-webpack-plugin      ，       
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})

// proxy api requests
Object.keys(proxyTable).forEach(function(context) {
  //            ，     ，     ，      ，  webpack-dev-server，          
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
})

// handle fallback for HTML5 history API
//               ，           search      404  
//     (3)
app.use(require('connect-history-api-fallback')())

// serve webpack bundle output
// app.use           ，        ，      
app.use(devMiddleware)

// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)

// serve pure static assets
//    staticPath  static ，path.posix.join             ，      
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
//       ，                ，staticPath        ，          static
app.use(staticPath, express.static('./static'))
//        'http://localhost:8080'
var uri = 'http://localhost:' + port

//    es6 promise  ，         
var _resolve
var readyPromise = new Promise(resolve => {
  _resolve = resolve // resolve                    
})
//        
console.log('> Starting dev server...')
// waitUntilValid webpack-dev-middleware     ，         
devMiddleware.waitUntilValid(() => {
  console.log('> Listening at ' + uri + '
')
    // when env is testing, don't need open it
    //           
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
  _resolve() //         ，      
})
// node.js    
var server = app.listen(port)
//                           ，vue         
module.exports = {
  ready: readyPromise, // promise  ，    readyPromise.then    
  close: () => {
    server.close() //      
  }
}

説明
（1）webpack-dev-middlewareプラグイン
このプラグインは環境開発にしか使えません。以下はこのプラグインの説明です。
これは簡単なwebpack包装ミドルウェアです。このプラグインは主にファイルのためのものです。ファイルを修正したらwebpackサーバーに提出して、これらの修正されたファイルを処理します。
このプラグインにはいくつかの利点があります。
第一に、すべてのファイルはdiskに書いてあります。ファイルの処理はメモリに行います。
第二に、ファイルがwatchモードで変更されたら、この中間部品はこれらの古いbundleにサービスしなくなります。これらの古いbundleにファイルが変更されたら、 このミドルウェアは要求を送信しません。現在のコンパイルが完了するまで、最新のファイルは変更されました。要求を送りますので、手動で更新する必要はありません。
第三に、今後のバージョンで最適化します。
まとめて、この中間部品はwebpack-dev-serverの核心であり、修正文書を実現し、webapack自動更新の機能を実現します。
npm install webpack-deb-middlewareをインストールします。
使用方法は以下の通りです。以下の使用方法もwebpack-dev-serverで実現したコードです。

var webpackMiddleware = require("webpack-deb-middleware");
app.use(webpackMiddleware(webpack({obj1}),{obj2}))

app.useは静的経路を設定するためのexpressの方法です。
上のobj 1はwebpackの設定対象です。webpackを使ってcomplerのコンパイル対象に変換します。obj 2はファイルを更新して包装した構成です。
webpackMiddleware処理後、静的経路に戻り、Obj 2に関するファイルの配置項目を入手しやすくなり、自分で調べられます。publicPathを追加しなければなりません。
ここでは、私たちの静的サーバはnode.jsです。ファイルは修正されました。webpack-dev-middlewareは修正されたファイルをコンパイルした後、nodejsサーバにどのファイルが修正されましたか？そして最新のファイルを静的サーバにアップロードしました。分かりましたよね。
（2）webpack-hot-middlewareプラグイン
このプラグインはwebpack-dev-middlewareを更新したファイル通知ブラウザにコンパイルして、ブラウザにファイルの更新方法を教えて、Webpack hot reloadingを実現します。
この2つのプラグインを組み合わせると、webpack-dev-severは必要なくてもいいです。つまり、自分でhot-replaccement熱交換機能を実現できます。webpack-hot-middlewareプラグインはブラウザにファイルの更新を通知します。大体は一つのjsonオブジェクトを通じて実現します。具体的な実現メカニズムはここでは多くは言いません。
npm install webpack-hot-middlewareをインストールします。
webpack-dev-middlewareを使用した後、下記のコードを追加すればいいです。

app.use(require("webpack-hot-middleware")(compiler));

（3）connect-history-appi-fallbackプラグイン
単一ページアプリケーションを開発する際には、全体として項目は一つのページになりますので、リフレッシュボタンをクリックすることにより、この時点でリンクとはホームページのアドレスではなく、404;または他のリンクを通じて(例えば/login.htmlロゴがないとエラーが発生しますが、このプラグインの役割は不正な操作による404の場合は、ページをデフォルトのindexとして位置づけて使用するのも簡単です。覚えておけばいいです。
npm install-save connect-history-appi-fallbackをインストールします。
使用

var history = require('connect-history-api-fallback');
  var express = require('express');
  var app = express();
  app.use(history());

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。