JavaScript by Example

Loaders in Webpack

Loaders are used for applying transformations to files before importing and bundling them. In Webpack, using different third-party loaders, we can transform any file and import it into our code. This goes for files written in other languages, such as TypeScript, Dart, and so on. We can even import CSS and images into our JS code. First, we'll use loaders to transform ES6 into ES5.

In the memes.js file, add the following code:

class Memes {  constructor() {    console.log('Inside Memes class');  }}new Memes();

This is a simple class using ES6 that has a console.log statement inside the constructor. We will use Webpack and babel-loader to transform this ES6 code to ES5 form. To do so, install the following packages:

npm install ...