html多个页面复用一个组件,webpack 多页应用 ejs模板的<%= %>特性 复用 html原理

组件

html-webpack-plugin

自动创建html组件

template：根据提供的模板创建默认支持html、ejs，其他模板引擎需要相关加载器。

坑点：如果全局部署了html加载器将不解析

注意：

ejs文档上，可以通过来进行html嵌套。但html-webpack-plugin并不解析 -include语句，会报错。经过百番查找并没有相关组件或配置方法，若有实现方法请告知万分感谢！

同时html-webpack-plugin 和 ejs-loader的文档也只是展示了特性。而查得文章其他教程也是通过该特性进行ejs模板拼接实现复用的。

如何通过进行拼接？

相关概念

相当于模板的参数。类似卡槽的概念

html-webpack-plugin的template参数实质只要接受html字符串即可。

所以在template入口处设置为一个输出html字符串的js文件。

简单演示：

我的入口：template: path.resolve(paths.pagesDir, page+'/render.js'), 路径拼接有点长请忽视，只是用来找到render.js文件就对了。

// 入口文件render.js

import test from './test.ejs'; //引入模块

module.exports = test({name: '2232'})

疑问：引入的test.ejs 看起来像html的东西，为什么是用方法调用呢？

// 模板文件 test.ejs

box1

疑问：ejs文件又不能import 其他js文件，要如何传入参数呢？

解答：

ejs文件被ejs-loader处理之后会变成接受参数并输出字符串的函数

// 打印 import test from './test.ejs' 模块

function (obj) { // 接受一个对象参数

obj || (obj = {});

var __t, __p = '';

with (obj) { // 在相应位置传入参数对象的name属性

__p += '

box1

\r\n

' + // 进行字符串拼接

((__t = ( name )) == null ? '' : __t) + // name参数处理

'

';

}

return __p // 拼接的模板

}

html-webpack-plugin的template人口虽然是js文件 实质得到的是 test.ejs模块的输出 __p字符串。

得出html：

box1

2232

这里只是出入字符串，如果出入的是其他ejs模板，即可实现ejs模板的拼接。

若需要了解更多关于webpack多页开发推荐阅读：webpack多页应用架构系列