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 put a simple element into the body:

static/index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!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
      id="test-container"
      style="
        width: 400px;
        height: 350px;
        margin: 100px;
        border: 1px solid green;
      "
    ></div>
  </body>
</html>

Now you see a fantastic green bordered box in your browser above your "Hello World!".

Back to top