Skip to content

Basics of Compilation

In your browser showing you the "Hello World" you can look at the sourcecode. You will see the following structure:

Sourcecode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!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>
    <link rel="icon" href="favicon/favicon.png" />
  </head>
  <body>
    <script src="cc-webpack.js"></script>
  </body>
</html>

You see that your script was compiled to a file named cc-webpack.js and linked into the document.

The name of your script file was taken from the name of the package defined in package.json. Let's modify this name to:

package.json

1
2
3
{
  "name": "walkthough-lib"
}

After saving, you will see the browser reloading, but the name of the script in the source code is still the same. This is because some changes cannot be automtically taken over. You have to stop the npm start (with Ctrl+C) in the watching terminal, and type again npm start. After the compilation and a new browser window, the name of the script file should have changed.

Sourcecode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!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>
    <link rel="icon" href="favicon/favicon.png" />
  </head>
  <body>
    <script src="walkthough-lib.js"></script></body>
  </body>
</html>

On a real-world-project you should think about changing the following parameters:

  • name
  • description
  • author (You could reference here to the AUTHORS file)
  • homepage
  • keywords
  • license

The basic structure of this HTML page was taken from the file static/index.html. You can put as many HTML files as you want into the static folder. All of them will be injected with your script file and later on with other assets. 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
<!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>
  </head>

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

As you can see you can use the preprocessing statement include of EJS. The boilerplate includes a file part.html which is now included. A final note: All files in the folder static/inc will be ignored. HTML files will not be parsed and no other files from there will be copied to the 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
<!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: 350px;
        margin: 100px;
        border: 1px solid green;
        float: left;
      }
    </style>
  </head>

  <body>
    <div class="test-container" style="overflow: scroll">
      <%= htmlWebpackPlugin.tags.headTags %>
    </div>
    <div class="test-container" style="overflow: scroll">
      <%- include inc/part.html %>
    </div>
  </body>
</html>

We use here the EJS tag <%= %> which will escape HTML characters. You see now a box with all injected head tags.