CodeCoupler Webpack Getting Started
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.
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
.
Overwrite Configurations
You have two places in which you can modify the resulting webpack configuration:
webpack.cc-config.js
: Set certain options that are taken into account when building the webpack configuration.webpack.config.js
: Into the classic webpack configuration file you can override every single property of the resulting configuration, or add new ones. Entries in this file take precedence1.
Examples
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.
Let's stop this watch mode with Ctrl-C and type the following:
1 |
|
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 favicon
folder. If you load the index.html
in your
browser you see your message again.
To get an overview, we recommend you to take a look at the walkthrough.
-
From 2.5 the precedence works correctly. ↩