仿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)

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

留着明天开发了。