仿B站项目(3)页面配置仿B站项目(3)页面配置

页面配置 B站有很多页面，比如说首页啊，动画页啊，音乐页啊，舞蹈页啊，那就从首页开始。
通过观察首页，可以看见有很多模块除了内容之外，在布局颜色等方面都是一样的，所以我可以开发一些模板或者插件，到时候直接插进主页里面去就行，然后内容数据就设置为可配置的形式。
模板就用ejs，于是我去了解了webpack中多个ejs生成html文件并且导入数据的方法。总结起来有2种。
ejs-loader
(1)在webpack.config.js中配置用ejs-loader解析ejs文件。(我只写了重要的部分，其它一些配置和插件我都没有写)

module: { rules: [ { test: /\.ejs$/, use: { loader: 'ejs-loader?variable=user', } } ] }, plugins: [ //使用模板生成html文件 new HtmlWebpackPlugin({ data: haha, filename:'index.html', template: 'src/page/template.html', title:'this is index', chunks: ['index'] }) ] };

(2)然后在index.html文件的对应要插入的位置用id标示出来。(比如说我要在下面的id为header的div里面插入一个header.ejs)

Document - 锐客网

(3)header.ejs文件是这样的，里面有一些数据需要传进去。

(4)在index.js里面调用模板，并且插到index.html文件里面去，就完成了。

var indexTpl = require('./header.ejs'); var user = { name: '我是谁' }; document.getElementById("header").innerHTML=indexTpl(user);

这样有一个缺点，就是打包出来的html文件里面没有要插入的内容，实际渲染的时候是在页面加载完成后通过js渲染的，这样的话会给浏览器造成一些压力，并且会拖慢页面的显示时间。
我们需要一个在打包前，就把模板加入到index.html文件里面去的方法。就是方法二。
ejs-compiled-loader
(1)在webpack.config.js中不用ejs-loader解析ejs文件，而是直接在HtmlWebpackPlugin插件中用ejs-compiled-loader解析ejs文件。由于没有用ejs-loader，所以后缀不能写成ejs，都改成html。(我只写了重要的部分，其它一些配置和插件我都没有写)

module: { rules: [ { test: /\.ejs$/, use: { loader: 'ejs-loader', } } ] }, plugins: [ //使用模板生成html文件 new HtmlWebpackPlugin({ filename:'index.html', template: 'ejs-compiled-loader!src/page/template.html', title:'this is index', chunks: ['index'] }) ] };

(2)然后在index.html文件的对应要插入的位置用ejs语言写出来。(比如说我要在下面的id为header的div里面插入一个header.html)

Document - 锐客网

(3)header.html文件和刚才一样。

(4)和刚才不一样的是，index.js什么都不需要做。
注意：上面是在html中直接用ejs语言引入数据的，但是也可以用js引入数据。代码需要修改如下：

//新建user.js文件 const user = { name: '我是谁' }; module.exports = user; //在webpack.config.js中引入user.js const user = require('./src/page/user.js'); plugins: [ new HtmlWebpackPlugin({ data: user, //引入user filename:'index.html', template: 'ejs-compiled-loader!src/page/template.html', title:'this is index', chunks: ['index'] }) ]//header.html文件中的变量变一下

一个问题
上面的方法生成了一个完整的html文件，对于小的不需要经常改动的页面来说非常合适。
但是对于大的每天需要更新一次的B站来说呢？每天怎么更新？如果把数据结合写死在页面的话，就需要更新整个页面，显然不合适。
【仿B站项目(3)页面配置】这个时候我脑光一现，想起了单web应用这本书的内容，那么为何不利用SPA的做法，用js来把页面导进去？
留着明天开发了。
转载于:https://www.cnblogs.com/yangzhou33/p/8570745.html