插件流程
插件介绍
egg-webpack
用于在 egg 项目中启动 Webpack 编译服务,具体流程请见 构建流程 。 该插件只在本地启用。 该插件除了深度结合 easywebpack 体系使用, 也可以单独使用,这个时候需要你自己编写 webpack 配置。
单独使用 egg-webpack 实现 egg vue 一体化方案(不依赖easywebpack)
- egg-webpack 配置
下面 require 的 webpack.config 为原生 webpack 配置。实现 SSR 时, 需要 target: node 和 target: web 两份 webpack 配置。注意 egg 模板默认路径是 app/view, 所以 target: node 的 编译路径要设置为 app/view 目录,target: web 可以编译到 egg 的默认 app/public 目录下。
// config/config.local.js
exports.webpack = {
webpackConfigList: require('./webpack.config')
};
- 渲染逻辑实现
'use strict';
const path = require('path');
const egg = require('egg');
const serialize = require('serialize-javascript');
const vueServerRenderer = require('vue-server-renderer');
module.exports = class IndexController extends egg.Controller {
async index(ctx) {
const { app } = ctx;
const entry = 'app.js';
// egg 模板默认路径是 app/view
const filepath = path.join(app.config.view.root, entry);
const manifest = require('../../config/manifest.json');
const res = manifest.deps[entry];
const cssLink = res.css.map(src => {
return `<link href="${src}">`;
});
const jsScript = res.js.map(src => {
return `<script src="${src}"></script>`;
});
jsScript.unshift(`<script> window.__INITIAL_STATE__= ${serialize({ cssLink: '', jsScript: '' }, { isJSON: true })};</script>`);
const state = { cssLink: cssLink.join('\r\n'), jsScript: jsScript.join('\r\n') };
if (app.config.env === 'local') {
const strJSBundle = await app.webpack.fileSystem.readWebpackMemoryFile(filepath);
ctx.body = await vueServerRenderer.createBundleRenderer(strJSBundle).renderToString({ state });
} else {
ctx.body = await vueServerRenderer.createBundleRenderer(filepath).renderToString({ state });
}
}
};
egg-webpack-vue
本地开发时,需要从 Webpack 内存里面读取 JSBundle 内容, 该插件会覆盖 egg-view-vue-ssr 的 render 本地文件读取逻辑,从而实现本地开发与线上代码逻辑耦合问题。
egg-view-vue-ssr
egg vue 渲染解决方案插件,统一封装 vue 渲染,缓存,资源注入等功能。 支持服务端渲染,前端渲染, Asset 渲染模式,同时提供
app.vue
扩展接口
内置方案
扩展方案
see: https://github.com/easy-team/egg-view-vue-ssr/blob/master/lib/engine.js
'use strict';
const path = require('path');
const egg = require('egg');
module.exports = class IndexController extends egg.Controller {
async index(ctx) {
const { app } = ctx;
const filepath = path.join(app.config.view.root, 'app.js');
const html = app.vue.render(filepath, { msg: 'render vue js bundle file to html'});
ctx.body = html;
}
};
插件版本
Egg + Vue + Webpack4 SSR 解决方案
easywebpack-cli”: ^4.x.x (devDependencies)
easywebpack-vue: ^4.x.x (devDependencies)
egg-webpack: ^4.x.x (devDependencies)
egg-webpack-vue:^2.x.x (devDependencies)
egg-view-vue-ssr: ^3.x.x (dependencies)
Egg + Vue + Webpack3 SSR 解决方案
easywebpack-cli”: ^3.11.0 (devDependencies)
easywebpack-vue: ^3.x.x (devDependencies)
egg-webpack: ^3.x.x (devDependencies)
egg-webpack-vue: ^2.x.x (devDependencies)
webpack-manifest-resource-plugin: ^2.x.x (devDependencies)
egg-view-vue-ssr: ^3.x.x (dependencies)