Caching is something that we alluded to in the previous chapter. cache-loader allows caches to be made from a loader. We can set it up as follows:

1. Begin by installing the loader through the Command-Line Interface (CLI), as follows:

npm install --save-dev cache-loader

Note that other loaders are executed in our configuration (see the following code) and a cache will be made of any of the resulting outputs made by the loader that start with cache-loader. This will be made, by default, in the project folder but can also be configured to be made in the cache in a database.

2. To configure this, use webpack.config.js:

module.exports = {
 module: {
  rules: [
  {
    test: /.ext$/,
    use: ['cache-loader', 'babel-loader'],
    include: path.resolve('src'),
   },
  ],
 },
};

That explains the installation and use of cache-loader. We'll go through a few other loaders in the same way, starting with worker-loader. As it will need to be declared first, we should discuss it first, even though it is always used in a chain or sequence with other loaders.