Webpack

The build system for Lore

Introduction

Lore uses Webpack for the build system.

If you're new to webpack, you may find this video series by Kent Dodds helpful for getting up to speed quickly. You can also check out the Official Tutorial on the webpack website.

The config file for webpack is located at the root of the project and called webpack.config.js. It uses a library called webpack-config-utils, created by Kent Dodds, in order to allow multiple environment configurations to live within the same config file, such as different configurations for development and production.

The config file includes defaults intended to cover the majority of application development concerns, which includes:

  • Support for common CSS preprocessors (LESS and SASS)
  • Support for common font types (ttf, otf, eot, woff, woff2)
  • Support for common image types (png, jpeg, gif, tiff, bmp, svg)
  • Automatically adds browser prefixes to CSS files
  • Favicon generation and insertion into the HTML file
  • Chunking (breaking the build up into multiple smaller files for faster page load)
  • Cache busting (adding a unique hash to production files to prevent browsers from re-using outdated files)

It's entirely possible you may never need to modify the config file. If you do, you can learn about the configuration options in the official webpack documentation.