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 |
|
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 |
|
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 |
|
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 add another HTML file into a subfolder called inc
:
static/inc/part.html
1 |
|
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 |
|
As you can see you can use we 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 by
default. HTML files will not be parsed and no other files from there will be copied to the dist
folder. Otherwise our file would have been copied and all assets injected in there.
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 |
|
We use here the EJS tag <%= %>
which will escape HTML characters. You see now a box with all
injected head tags.