likes
comments
collection
share

webpack-mainfest-plugin 插件作用

作者站长头像
站长
· 阅读数 36

webpacj-manifest-pluginSSR项目应用

Vue项目结合webpack打包出来的js和css都是自动引入到html页面中的，当引用服务端渲染的时候，这个html页面需要后台模板返回给我们，这个时候，后台需要知道他引入的这些外部资源的路径，我们需要把这个路径给到服务端，node或者java，利用此插件，打包后可以生产一个json文件webpack-mainfest-plugin 插件作用。

有个这个json文件，我们的后端就可以很容易获取到，从而渲染模板给我们。此处利用node为例 const htmlPath = require('./dist/manifest.json');

res.send(` <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>ssr</title><link href="${htmlPath['main.css']}" rel="stylesheet"></head><body> <div id="app"></div><script type="text/javascript" src="${htmlPath['main.js']}"></script></body></html>`);

结尾附上此插件安装方法。npm i webpack-manifest-plugin -D