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