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:

1. webpack.cc-config.js: Set certain options that are taken into account when building the webpack configuration.
2. 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 precedence¹.

Examples

Let's try an example. Put this code into the src/index.js:

document.write("Hello World");

Now start a terminal and type:

npm start

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:

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 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.

---

1. From 2.5 the precedence works correctly. ↩