Image loading in JavaScript and CSS files: This is a method used to generate URLs for image files based on their configured location.Concatenation: This is the method of combining several files into one.

Other techniques include renaming functions and variable names. It is done by removing unnecessary whitespace. Minification: This is the process of reducing code filesize.Please find the finished project code in this GitHub repo.Ĭompilation Requirements of a Simple Web Application Webpack is in fact the most popular build tool according to the 2018 State of JavaScript survey, as pictured below: The reason we are using webpack is that many major web frameworks use it, including the official React.js compiler, create-react-app. In this tutorial, we will be demonstrating how to setup webpack for a React.js application. There are many contenders in this field, Gulp and Browserify being two. In light of this, several tools have been created to make development and shipping easier and more efficient. We will get into these in more detail later. For a simple application, some of these complexities include: CSS and JavaScript minification, JavaScript and CSS code concatenation, image loading in JavaScript files, file watching, and auto-compilation. With this power, comes a lot of complexity. Web apps are close to or more powerful than their desktop counterparts. It should be self-evident that web applications keep growing in terms of their capabilities.

Webpack documentation basic setup