In this tutorial, you will learn how to set up Webpack to use images as assets for your application. Essentially, there is not much in Webpack to include your desired images for your web application. First, put your image files into one folder of your projects application. For instance, your src/ folder may have a folder assets/ which has a…

In this tutorial, you will learn how to set up a local font with Webpack. We will use Open Sans, but you can decide to use any other web font as well. If you have your font files already at your disposal, don't bother about downloading them again. For our case, we will download the font to our local setup from Google Webfonts . Therefore, follow…

So far, you should have a working JavaScript with Webpack application. In this tutorial, we will take this one step further by introducing ESLint for an enforced unified code style without code smells. Code style becomes an important topic for developers. If you just code for yourself, it might be alright to violate best practices. However, in a…

Babel enables one writing code with JavaScript features that aren't supported by most browser yet. Perhaps you have heard about JavaScript ES6 (ES2015) , ES7, and other versions of ECMAScript specification which are up and coming for the JavaScript language. At the time of reading this, various versions may be already included in the JavaScript…

If you happen to have a custom Webpack setup, you may be wondering how to set up CSS with Webpack. This short tutorial walks you through the process. First of all, you need to install a CSS loader and a style loader to your dev dependencies: And second, you can use both loaders for all CSS files in your Webpack configuration: Then in a new src…

If you happen to have a custom Webpack setup, you may be wondering how to set up SASS with Webpack. This short tutorial walks you through the process. First of all, you need to install a SASS loader and a SASS to your dev dependencies: And second, you can use the SASS loader for all CSS and SCSS files in your Webpack configuration: Then in a new…

If you happen to have a custom Webpack setup, you may be wondering how to set up PostCSS with Webpack. This short tutorial walks you through the process. First of all, you need to install the PostCSS loader and a sensible PostCSS configuration to your dev dependencies: Next, create a postcss.config.js file where you will reference all your…

If you happen to have a custom Webpack setup, you may be wondering how to set up React Router with Webpack. Let's say we have the following minimal React application using React Router: If you open your React application and navigate between both paths, everything should be fine. However, if you navigate via the browser's URL bar to /about, you…

Webpack is a JavaScript bundler for your web application. In the past, you had to link JavaScript files manually in HTML files. Nowadays, Webpack takes care about it. In this tutorial, I want to walk you through a minimal Webpack setup for a JavaScript + HTML application. Afterward, you should be able to extend Webpacks features, advance your…