Skip to content

Static Files

The basic structure of the HTML file produced in the dist directory was taken from the file static/index.html. You can put as many HTML files as you want into the static directory. All of them will be injected with your script file and other assets.

Let's add another HTML file into a subfolder called inc:

static/inc/part.html

1
<p>This is just an example of a paragraph</p>

Now let's modify our static/index.html and add an include statement:

static/index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>CodeCoupler</title>
    <style>
      .test-container {
        width: 400px;
        height: 400px;
        margin: 10px;
        display: flex;
        flex-flow: column;
        float: left;
        padding: 10px;
      }
      .test-container > div {
        height: 100%;
        overflow: scroll;
      }
    </style>
  </head>

  <body>
    <div class="test-container" style="overflow: scroll">
      <h4>Testing Static Includes</h4>
      <hr />
      <div><%- include inc/part.html %></div>
    </div>
  </body>
</html>

As you can see you can use in static HTML files the preprocessing statement include of EJS.

Why we have used the subfolder inc?: All files in the folder static/inc will be ignored and will not be parsed, injected and will not be copied to the final dist folder.

You can use even some more predefined variables, like the header and body tags. Let's add some more things to our index.html:

static/index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>CodeCoupler</title>
    <style>
      .test-container {
        width: 400px;
        height: 400px;
        margin: 10px;
        display: flex;
        flex-flow: column;
        float: left;
        padding: 10px;
      }
      .test-container > div {
        height: 100%;
        overflow: scroll;
      }
    </style>
  </head>

  <body>
    <div class="test-container">
      <h4>Testing Tags Variables</h4>
      <hr />
      <div><%= htmlWebpackPlugin.tags.headTags %></div>
    </div>
    <div class="test-container">
      <h4>Testing Static Includes</h4>
      <hr />
      <div><%- include inc/part.html %></div>
    </div>
  </body>
</html>

We use here the EJS tag <%= %> which will escape HTML characters.

Now start the dev server with npm start to see the results in a browser window. You see now a box with all injected head tags.