详解 vue-cli 的打包配置文件代码（带注释）

host: ‘c.y.qq.com’

},

params: req.query

}).then((response) => {

res.json(response.data)

}).catch((e) => {

console.log(e)

})

})

apiRoutes.get(‘/lyric’, function (req, res) {

var url = ‘https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg’

axios.get(url, {

headers: {

referer: ‘https://c.y.qq.com/’,

host: ‘c.y.qq.com’

},

params: req.query

}).then((response) => {

var ret = response.data

if (typeof ret === ‘string’) {

var reg = /^\w+(({[()]+}))$/

var matches = ret.match(reg)

if (matches) {

ret = JSON.parse(matches[1])

}

}

res.json(ret)

}).catch((e) => {

console.log(e)

})

})

app.use(‘/api’, apiRoutes)

var compiler = webpack(webpackConfig)

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

var devMiddleware = require(‘webpack-dev-middleware’)(compiler, {

publicPath: webpackConfig.output.publicPath,

quiet: true

})

// 启动 webpack-hot-middleware，也就是我们常说的 Hot-reload

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()

})

})

// 将 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))

})

// 使用 connect-history-api-fallback 匹配资源，如果不匹配就可以重定向到指定地址

app.use(require(‘connect-history-api-fallback’)())

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

app.use(devMiddleware)

// 将 Hot-reload 挂在到 express 服务上

app.use(hotMiddleware)

// 拼接 s