@wbi/cli-service/build/dev-server.js

local service for wb-cli projects

/**
 * Created by Administrator on 2019/2/7.
 * 开发服务器子进程
 * 用express搭建的node服务器，用于开发构建
 */
process.env.NODE_ENV = 'development'

const path = require('path')
const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const proxyMiddleware = require('http-proxy-middleware')
const rm = require('rimraf')

const app = express()
const utils = require('./utils')
const watch = require('./watch')
const wbConfig = utils.wbConfig
const proxy = wbConfig.proxy

// 删除.tmp文件夹
rm.sync(utils.resolve('./.tmp'))

const webpackDevConfig = require('./webpack.dev.config')
const compiler = webpack(webpackDevConfig)

// 删除dist文件夹，避免生成的静态文件干扰开发
rm(webpackDevConfig.output.path, err => {
  if (err) throw err
  // console.log('The dist folder has been deleted')
})

// webpack开发方面的中间件，在开发时实时用webpack编译文件
let devMiddleware = webpackDevMiddleware(compiler, {
  publicPath: webpackDevConfig.output.publicPath,
  // 如何展示bundle信息；'none'不展示，'errors-only'只展示错误信息
  stats: 'none', // 不显示webpack打包时的资源信息
  logLevel: 'silent' // 隐藏所有需要打印在命令行的信息
})
// 客户端与服务器端沟通的桥梁，当文件被编译后会通知客户端热重载
let hotMiddleware = webpackHotMiddleware(compiler, {
  log: false,
  heartbeat: 2000,
  overlay: false
})

// 处理接口proxy
Object.keys(proxy).forEach(function (context) {
  let options = proxy[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
})

// 注入中间件
app.use(devMiddleware)
app.use(hotMiddleware)

// static目录解析
let staticPath = path.posix.join(wbConfig.publicPath.dev, 'static')
app.use(staticPath, express.static(wbConfig.staticDirectory))

// commonStatic目录解析
let commonStaticPath = path.posix.join(wbConfig.publicPath.dev, 'commonStatic')
app.use(commonStaticPath, express.static(wbConfig.commonStaticDirectory))

// 静态资源解析
app.use(express.static(webpackDevConfig.output.path))

// 是否主动刷新浏览器
/*
let canReloadBrowser = false
process.on('message', data => {
  if (data === 'reload') {
    console.log('trigger reload')
    canReloadBrowser = true
  }
})
compiler.hooks.done.tap('done', () => {
  if (canReloadBrowser) {
    canReloadBrowser = false
    setTimeout(() => {
      console.log('done')
      hotMiddleware.publish({ action: 'reload' })
    }, 500)
  }
})
*/

// 监听浏览器dom节点ready
/*let publishPugLint
app.post('/domReady', (req, res, next) => {
  res.json({code: 200, message: 'Server received'})
  publishPugLint && publishPugLint()
})*/

app.listen(webpackDevConfig.devServer.port, () => {
  // 监听文件变化时需要刷新浏览器或者热替换
  watch(compiler, hotMiddleware)
  // publishPugLint = watch(compiler, hotMiddleware, process).publishPugLint
  // 向父进程传递消息信号，可以打开浏览器窗口
  process.send({ action: 'open', port: webpackDevConfig.devServer.port })
})