页面配置
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)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="header"></div>
</body>
</html>
(3)header.ejs文件是这样的，里面有一些数据需要传进去。
<div><%= user.name %></div>
(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)
<% var user = {
name: '我是谁'
} %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<% include src/page/header.html %>
</body>
</html>
(3)header.html文件和刚才一样。
<div><%= user.name %></div>
(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文件中的变量变一下
<div><%= htmlWebpackPlugin.options.data.name %></div>
一个问题
上面的方法生成了一个完整的html文件，对于小的不需要经常改动的页面来说非常合适。
但是对于大的每天需要更新一次的B站来说呢？每天怎么更新？如果把数据结合写死在页面的话，就需要更新整个页面，显然不合适。
这个时候我脑光一现，想起了单web应用这本书的内容，那么为何不利用SPA的做法，用js来把页面导进去？
留着明天开发了。