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 -D babel-core babel-loader babel-preset-env babel-preset-es2015

In your webpack.config.js file, add the following code below the output property:

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env', 'es2015'],
        }
      }
    }
  ],
},

This is how we should add a loader in Webpack. We need to create an array of rules inside the module section. The rule contains an array of configuration objects for the loaders. In our configuration, it will test the file to see whether it matches the regular expression .js$, that is, check whether the file is a JavaScript file using its extension. We have excluded the node_modules directory so that only our code will be evaluated for transformation.

If the imported file is a JavaScript file, Webpack will use babel-loader with the provided options. Here, in options, we instruct Babel to use env and es2015 presets. The es2015 preset will transpile the ES6 code into the ES5 format.

env preset is more special. It is used for transpiling any ES version of javascript to the version supported by a specific environment (such as specific versions of Chrome and Firefox). If no configuration is provided, as in our earlier mentioned code, then it will make the JavaScript code (even ES8) work in almost all environments. More information on this preset can be found at https://github.com/babel/babel-preset-env.

Similarly, let's bundle our CSS code using Webpack. Bundling CSS code with Webpack has many advantages. Some of them are as follows:

• Use only the required CSS code for each web page by importing it in respective JavaScript files. This will lead to easier and better dependency management and reduced file sizes per page.
• Minification of CSS files.
• Automatically add vendor-specific prefixes easily using autoprefixer.
• Easily compile stylesheets written using Sass, Less, Stylus, and so on to normal CSS.

There are even more advantages as to why you need to bundle your CSS code using Webpack. So, let's start by bundling our styles.css file and then Bootstrap's files. Install the following dependencies for implementing our loader for CSS:

npm install -D css-loader style-loader

In our Webpack configuration, add the following object to the rules array:

{
  test: /\.css$/,
  use: [ 'style-loader', 'css-loader' ]
},

We are installing two loaders to bundle CSS files:

1. The first one is css-loader. It resolves all the imports and url() using Webpack. It then returns the complete CSS file.
2. style-loader will add the CSS to the page so that the styles are active on the page.
3. We need to run css-loader first, followed by style-loader, which uses the output returned by css-loader. To do that, we have written the following:
   • For a CSS file: test: /\.css$/
   • Use the following loaders: use: ['style-loader', 'css-loader']. Webpack executes the loaders in a last to first order. So, first, css-loader will be executed and its output will be passed over to style-loader.
4. Open up your general.js file and add the following line at the beginning of the file:

import '../css/styles.css';

Also, remove the <link> attribute used to include the CSS file in your index.html page. Here's the trick: the CSS file will be imported into the general.js file, which will in turn be imported into the memes.js file, which is the only file you need to include in index.html.

Now is the time to see our application. Execute npm run webpack in your terminal and open up the website that only has a single memes.js file included in Chrome. You should see the exact page with no changes. All the dependencies are bundled into a single file--except Bootstrap!