webpack ejs怎样模块化？

Question

比如
header.ejs:

<div class="header-tpl"><%= title %></div>

header.js:

import header from './header.ejs';
import './header.css';

export default function HeaderTpl(){
    const data = {
        title: 'I am header'
    }
    return {
        header: header(data)
    }
}

以上是两个毫无关联的文件，在
home.ejs:

<%= require('./components/header.ejs')() %>
...

会报错，找不到title （当然的，因为没关联header.js）
我想问的是在webpack中怎样写才对？

Google到的方案：

1. 写在配置文件里...（当真么这是...）

const value = {...}
plugins.push(
    new HtmlWebpackPlugin({
      filename: `${value.path}.html`,
      template: path.resolve(__dirname, '../src', `${value.path}.ejs`),
      inject: true,
      chunks: ['common', value.path],
      favicon: './src/assets/img/favicon.ico',
      title: value.text,   // 这里传入了title
      path:value.path,
      minify: {
        collapseWhitespace: true
      }
    })
  )

1. 通过js导入

import HeaderTpl from '../components/header.js';
const header = new HeaderTpl();
$('body').prepend(header.header);

是可以啦，没啥毛病，但我个人更倾向于

<%= require('./components/header.ejs')() %>

的写法，维护也方便

请问，有大佬知道怎样配置才更合理吗？