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

Question

我有一个使用Twig进行模板化的项目.其中的所有数据都是静态的,但为了清楚起见,我已将页面的其他部分分离出来(否则在一个文件中会有数百行标记).

我使用webpack作为构建工具,以及HTML Webpack插件.

例如,假设我有以下内容:

意见/ index.html的

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

意见/首页/ hello.html的

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

现在我想做的是使用webpack捆绑任何js,css,并使用HTML Webpack Plugin创建HTML页面并将这些样式和脚本注入:

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

在我的dist/index.html中,我希望得到这样的内容,生成的html页面显示为HTML:

DIST/index.html的

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

但是,我得到的是这样的东西,它仍然显示我的'包含'模板:

DIST/index.html的

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

如果无法编译模板,是否可以使用Html Webpack Plugin复制所有模板(所有模板文件的整个目录到/ 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。并像上面一样使用插件。