这里我们通过正则的方式将template与style标签中匹配到的内容单独抽离了出来，接下来我们需要将gif图转成base64并插入到我们抽出的css代码当中
let gifPath = resolvePath('./src/loading/imgs/loading.gif') const transGifToCSSFile = (imgPath) => { let ext = path.extname(imgPath).slice(1) let preStr = `data:image/${ext};base64,` // 根据尾缀自动拼接对应base64前缀 let bitDate = fs.readFileSync(imgPath) let base64Str = bitDate.toString('base64') let dataURL = preStr + base64Str return dataURL } let dataURL = transGifToCSSFile(gifPath)
上面我们通过extractAssetsInVueTpl函数抽离出了css，这里我们通过一个简单的函数将占位符替换成base64图片
const injectDataURLToCSS = (cssStr, dataURL) => { return cssStr.replace(/__inline__/, dataURL) } let cssStr = injectDataURLToCSS(vueAssets.css, dataURL)
下面我们就导出loading配置，包含了html模板与style样式字符串
loading.html = vueAssets.html loading.css = '<style>' + cssStr + '</style>' module.exports = loading
简单写一个webpack入口配置，这里我们需要使用html-webpack-plugin将loading插入到html中(这里用到了插件的自定义模板)
const HtmlWebpackPlugin = require('html-webpack-plugin') const loading = require('./render-loading') module.exports = { entry: './src/index.js', output: { path: __dirname + '/dist', filename: 'index_bundle.js' }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', loading: loading }) ] }
在html中我们通过模板语法将loading的内容插入到html模板中对应的位置了
<html> <head> <meta charset="UTF-8"> <title>test</title> ... <%= htmlWebpackPlugin.options.loading.css %> </head> <body> <div> <!-- loading base64图 --> <%= htmlWebpackPlugin.options.loading.html %> </div> ... </body> </html>
四、总结
这里只是写一个demo介绍一下原理，更复杂的可以使用vue-server-render来做同构直出或者使用一些像handlebars的模板引擎来生成模板，其实就是将服务端的渲染工作放到了编译的过程当中。