CoffeeScript is a simplified form of JavaScript, but it isn't exactly JavaScript, so a loader must be used to work with it in Webpack.

Let's go through the following steps to be able to use coffee-loader:

1. Begin by installing coffee-loader. To install the loader, use the following command line:

npm install --save-dev coffee-loader

2. Ensure that you are using the recommended configuration of the loader for the sake of testing and to use the literate key. To allow testing, load coffee-loader and set the literate key to true. The literate key will ensure that the loader's usage is interpreted by the compiler :

module.exports = {
    module: {
      rules: [
       {
          test: /.coffee.md$/,
          use: [{
          loader: 'coffee-loader',
          options: {
            literate: true
         }
      }]
    }]
  }
}

The code in the preceding example shows how the loader can be used and a new rule set up.

3. Should you need it, we will show you how to install coffee-redux. Redux is an open source library for managing JavaScript application states. It is frequently used with libraries such as React and Angular. To install it, type the following command:

npm i -D coffee-redux-loader

The preceding example will not only help you understand the procedure for installing and using CoffeeScript in your bundles but also how the procedure works for the loaders that are not mentioned here, as they work in pretty much the same way.

You will see, however, that the shorthand installation and development mode for setting the command line has been used— i and -D, respectively. This works, in most cases, although you may find that there is now a response when there is a compatibility issue between your command-line utility and the Webpack version you are using.

Doing things this way can save you time, but when in doubt, use the verbose command-line convention demonstrated in this guide.

Now, let's move on to coverjs, which works a little differently.