详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南

2020-06-14 06:22:03易采站长站整理

const webpackDevMiddleware = require('./koa/dev')
const webpackHotMiddleware = require('./koa/hot')
const readline = require('readline')
const conf = require('./app')
const {
hasProjectYarn,
openBrowser
} = require('./lib')

const readFile = (fs, file) => {
try {
return fs.readFileSync(path.join(webConfig.output.path, file), 'utf-8')
} catch (e) {}
}

module.exports = (app, cb) => {
let apiMain, bundle, template, clientManifest, serverTime, webTime, apiTime
const apiOutDir = apiConfig.output.path
let isFrist = true

const clearConsole = () => {
if (process.stdout.isTTY) {
// Fill screen with blank lines. Then move to 0 (beginning of visible part) and clear it
const blank = 'n'.repeat(process.stdout.rows)
console.log(blank)
readline.cursorTo(process.stdout, 0, 0)
readline.clearScreenDown(process.stdout)
}
}

const update = () => {
if (apiMain && bundle && template && clientManifest) {
if (isFrist) {
const url = 'http://' + conf.app.devHost + ':' + conf.app.port
console.log(chalk.bgGreen.black(' DONE ') + ' ' + chalk.green(`Compiled successfully in ${serverTime + webTime + apiTime}ms`))
console.log()
console.log(` App running at: ${chalk.cyan(url)}`)
console.log()
const buildCommand = hasProjectYarn(process.cwd()) ? `yarn build` : `npm run build`
console.log(` Note that the development build is not optimized.`)
console.log(` To create a production build, run ${chalk.cyan(buildCommand)}.`)
console.log()
if (conf.app.open) openBrowser(url)
isFrist = false
}
cb(bundle, {
template,
clientManifest
}, apiMain, apiOutDir)
}
}

// server for api
apiConfig.entry.app = ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true', apiConfig.entry.app] apiConfig.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
const apiCompiler = webpack(apiConfig)
const apiMfs = new MFS()
apiCompiler.outputFileSystem = apiMfs
apiCompiler.watch({}, (err, stats) => {
if (err) throw err
stats = stats.toJson()
if (stats.errors.length) return
console.log('api-dev...')
apiMfs.readdir(path.join(__dirname, '../dist/api'), function (err, files) {
if (err) {
return console.error(err)
}
files.forEach(function (file) {
console.info(file)
})
})
apiMain = apiMfs.readFileSync(path.join(apiConfig.output.path, 'api.js'), 'utf-8')
update()
})
apiCompiler.plugin('done', stats => {
stats = stats.toJson()
stats.errors.forEach(err => console.error(err))
stats.warnings.forEach(err => console.warn(err))
if (stats.errors.length) return

apiTime = stats.time
// console.log('web-dev')