CodeCoupler Webpack First Steps Application
To get an overview, we recommend you to take a look at the walkthrough.
Writing Code
After setup you can start writing your code in the folder src and put asset files into the folder
static. You can organize the files inside these folders as always you want.
Keep this in mind that only the file src/index.js will be used as single entry point. You should
start here writing your code and import all the other needed modules and stylesheets.
All the files inside of the src folder will be compiled to work with all browsers specified in the
.browserslistrc. The files inside of the folder static will just copied and html files will be
injected with code pointing to the compilation result of the src folder.
A last important Note: Do not put anything into the folder dist. This folder will wiped everytime
you compile. Use only the folders src and static.
Watch Changes
If running npm start the Webpack dev server will start watch all the used files in the src
directory and all changes in the static folder (modifying, adding, deleting files) 1. Changes
will trigger a rebuild and full page reload.
Let's try an example. Put this code into the src/index.js:
1 | |
Now start a terminal and type:
1 | |
The compilation will start and right after that a browser. You should see now the ingenious message "Hello World".
If you go back into the editor, change the message and save the file the recompilation will start automatically and the browser reloads the page with your new message.
Build
With the command npm run build the compilation will start and a folder dist will appear. Inside
of this folder you will see a compiled .js file an index.html and a manifest 2 folder. If
you load the index.html in your browser you will see your message again.