如何处理模板与webpack和html webpack文本插件？

Question

我有一个项目，使用Twig模板。它中的所有数据都是静态的，但为了清晰起见，我在其他twig文件中分离了页面的部分（否则一个文件中会有数百行标记）。

<h1>This is my main index page</h1>    
{% includes './welcome/hello.html' %}

views/welcome/hello.html

<p>Hello from the templated page.</p>

现在我想做的是使用webpack捆绑任何js、css，并使用HTML webpack插件创建HTML页面，并将这些样式和脚本注入：

dist/index.html
dist/bundle.js
dist/styles.css

在我的dist/index.html中，我希望得到这样的结果，生成的html页面显示为html：

<h1>This is my main index page</h1>
<p>Hello from the templated page.</p>

<h1>This is my main index page</h1>
{% includes './welcome/hello.html' %}

如果无法编译模板，是否可以使用Html Webpack插件复制所有模板（将所有模板文件的整个目录复制到/dist，以便维护它们的路径）？

谢了！

Answer 1

您可以使用ejs-render-loader。参见包装。

 // webpack
         new HtmlWebpackPlugin({
                filename: 'a.html',
                hash: true,
                template: 'ejs-render?a.ejs',
         })
 // a.ejs
    <%- include components/menu -%>

 // components/menu.ejs
    <p>hei hei hei hei</p>

我认为可以将.html更改为.ejs文件。并使用类似上面的插件。