The assets directory

The /assets/ directory is used to contain the assets of your project, such as images, fonts, and Less, Stylus, or Sass files, that will be compiled by webpack. For example, you may have a Less file, as follows:

// assets/styles.less
@width: 10px;
@height: @width + 10px;

header {
  width: @width;
  height: @height;
}

webpack will compile the preceding code into the following CSS for your app:

header {
  width: 10px;
  height: 20px;
}

We will discuss the benefits of serving images in this directory later in this chapter, and we will use this directory often in this book when generating static pages.