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

Question

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

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

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

View /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 页面并将这些样式和脚本注入(inject):

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 . see package .

 // 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文件。并使用上面的插件。