webpack ejs怎样模块化?

比如
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')() %>

的写法,维护也方便

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

阅读 2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进