How to handle templates using webpack and html webpack text plugin?

Question

I have a project that uses Twig for templates. All the data in it is static, but I just selected parts of the page in other twig files (otherwise there will be hundreds of lines of markup in one file).

I use webpack as a build tool, as well as HTML Webpack Plugin.

For example, suppose I have the following:

view /index.html

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

View / Welcome /hello.html

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

Now that I would like to do this, use webpack to link any js, css, and also use the HTML Webpack Plugin to create the HTML page and paste these styles and scripts into:

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

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

distance /index.html

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

, , , , , "" :

/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 . , .