# Webpack

Webpack takes care of building the project and monitoring file changes, as well as launching a live reload server. Each time you change a source file in the project, Webpack will notice and build the relevant parts of the project. See Develop & Build for more info.

# Entry points

Webpack uses entry points to build a project. Our global entry point is src/js/all.js. In there, all files (CSS, JS and Templates) are listed and will be built on change.

When you add a file to the project (let's say myFunction.ts), make sure that this file is added to the entry point as well. So in all.js, add the following line:

import "./functions/myFunction.ts";

The same goes for scss and pug files. Note the difference in path, since our entry point is in js, we have to traverse up the folder structure to reach the item.

import "../templates/template.twig";
import "../sass/style.scss";

# Output

All output will go to public_html. In there, you'll have: