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

时间 2019-11-20

标签项目页面配置繁體版

原文原文链接

页面配置

B站有不少页面，好比说首页啊，动画页啊，音乐页啊，舞蹈页啊，那就从首页开始。html

经过观察首页，能够看见有不少模块除了内容以外，在布局颜色等方面都是同样的，因此我能够开发一些模板或者插件，到时候直接插进主页里面去就行，而后内容数据就设置为可配置的形式。webpack

模板就用ejs，因而我去了解了webpack中多个ejs生成html文件而且导入数据的方法。总结起来有2种。web

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文件里面去，就完成了。ui

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

这样有一个缺点，就是打包出来的html文件里面没有要插入的内容，实际渲染的时候是在页面加载完成后经过js渲染的，这样的话会给浏览器形成一些压力，而且会拖慢页面的显示时间。this

咱们须要一个在打包前，就把模板加入到index.html文件里面去的方法。就是方法二。插件

ejs-compiled-loader

(1)在webpack.config.js中不用ejs-loader解析ejs文件，而是直接在HtmlWebpackPlugin插件中用ejs-compiled-loader解析ejs文件。因为没有用ejs-loader，因此后缀不能写成ejs，都改为html。(我只写了重要的部分，其它一些配置和插件我都没有写)code

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来把页面导进去？

留着明天开发了。