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 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 |
|
Now you see a fantastic green bordered box in your browser above your "Hello World!".