Skip to content

Setup

In this walkthrough we will build a small web application. The goal of this walkthrough is to learn the CodeCoupler Webpack development environment @codecoupler/cc-webpack.

Please make sure that you have read the section Recommended Visual Code Setup to prepare your Visual Code environment.

Start your project in a new folder and create a folder named walkthrough-env and initialize the project with:

1
2
3
4
5
mkdir walkthrough-env
cd walkthrough-env
npm init @codecoupler/cc-webpack@latest
git init -b main
npm i

Go to the file index.js in the folder src and put your first line of code:

src/index.js

1
document.write("Hello World");

Please start now the dev server with npm start. You should see now the ingenious sentence "Hello World" in a new opened browser window. Now add an exclamation mark at the end and save the file again:

src/index.js

1
document.write("Hello World!");

In the terminal you will see a new compilation starting, then the browser reloads and you will see the changes. All modifications in your code from now will reload the page automatically till you stop the dev server with Ctrl+C.

Now stop the dev server and start a compilation with npm run build. After the compilation you will see a new directory dist. Inside of this directory you will find a JavaScript file in which all your code was bundled, a subdirectory manifest in which many different favicons was generated and an HTML file in which the JavaScript file and all favicons was linked.

📁 dist
├─ cc-webpack.<hash>.js
├─ index.html
└─ 📁 manifest

If you open the HTML file you will see the code was minified. Let's try now npm run build:dev. Now the manifest directory contains only one favicon and the HTML file is more readable. This is the compilation in development mode which is faster and more helpful if you want to debug something.

You see that your code was compiled to a file named cc-webpack.<hash>.js.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
{
  "name": "walkthrough-env"
}

Now run again npm run build:dev. After the compilation the name of the script file in the dist directory should have changed:

📁 dist
├─ walkthrough-env.<hash>.js
├─ index.html
└─ 📁 manifest