//检查Node和npm版本
require('./check-versions')()
//获取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)
}
//一个可以强制打开浏览器并跳转到指定URL的插件
var opn = require('opn')
//使用NodeJS自带的文件路径工具
var path = require('path')
//使用express
var express = require('express')
//使用webpack
var webpack = require('webpack')
//使用proxyTable
var proxyMiddleware = require('http-proxy-middleware')
//使用dev环境的webpack配置
var webpackConfig = require('./webpack.dev.conf')
// 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
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
//使用express启动一个服务
var app = express()
//启动webpack进行编译
var compiler = webpack(webpackConfig)
//启动webpack-hot-middleware也就是我们常说的Hot-reload
var devMiddleware = require('webpack-dev-middleware')(compiler,{
publicPath: webpackConfig.output.publicPath,quiet: true
})
var hotMiddleware = require('webpack-hot-middleware')(compiler,{
log: () => {}
})
// force page reload when html-webpack-plugin template changes
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匹配资源，如果不匹配就可以重定向到指定地址
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'))
//为静态资源提供相应服务
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()
}
}
