如何使用webpack和html-webpack-text-plugin处理模板？

Question

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

我正在使用webpack作为构建工具，并使用HTML Webpack插件。

例如，假设我有以下内容：

views/index.html

<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 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>

然而，我得到的结果是这样的，它仍然显示了我的“includes”模板： dist/index.html

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

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

- hidace

---

http://stackoverflow.com/questions/38645498/generate-the-html-template-equivalent-of-a-twig-file - DarkBee

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 文件，并使用上述插件。

- deju

---

请问您能否添加一个如何与html-webpack-plugin一起使用的示例？ - jantimon

@jantimon 我更新了答案。希望它能对你有所帮助。 - deju

难道不应该是 !!ejs-render!a.ejs 吗？ - jantimon

@jantimon 抱歉，应该是 ejs-render!a.ejs。 - deju

实际上，你根本不需要一个ejs-loader；因为“会有一个备用的ejs loader自动启动”。-> https://github.com/ampedandwired/html-webpack-plugin/blob/master/docs/template-option.md 。因此，template: 'a.ejs'就足够了。 - Christian Ulbrich