How to handle templating with webpack and html webpack text plugin?

Question

I have a project that uses Twig for templating. All the data in it is static, but I have separated out parts of the page within other twig files for clarity sake (otherwise there would be hundreds of lines of markup in one file).

I'm using webpack as a build tool, along with HTML Webpack Plugin.

For example, let's say I have the following:

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>

Now that I'd like to do is use webpack to bundle any js, css and also use HTML Webpack Plugin to create an HTML page and inject those styles and scripts into:

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

In my dist/index.html, I was expecting to get something like this where the html page generated is shown as HTML:

dist/index.html

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

However, what I am getting is something like this where it still shows my 'includes' templating:

dist/index.html

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

If it's not possible to compile the templates, is it possible to use Html Webpack Plugin to copy over all the templates (entire directory of all template files to /dist so that they maintain their paths)?

Thanks!

Answer 1

You can use 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>

I think you can change your .html to .ejs file. And use plugin like above.