Caches the result of following loaders on disk (default) or in the database
npm install --save-dev cache-loader
Add this loader in front of other (expensive) loaders to cache the result on disk.
webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.ext$/,
        use: [
          'cache-loader',
          ...loaders
        ],
        include: path.resolve('src')
      }
    ]
  }
}
 ⚠️ Note that there is an overhead for saving the reading and saving the cache file, so only use this loader to cache expensive loaders.
| Name | Type | Default | Description | 
|---|---|---|---|
  cacheKey  | 
  {Function(options, request) -> {String}}  | 
  undefined  | 
    Allows you to override default cache key generator    | 
  cacheDirectory  | 
  {String}  | 
  path.resolve('.cache-loader')  | 
    Provide a cache directory where cache items should be stored (used for default read/write implementation)    | 
  cacheIdentifier  | 
  {String}  | 
  cache-loader:{version} {process.env.NODE_ENV}  | 
    Provide an invalidation identifier which is used to generate the hashes. You can use it for extra dependencies of loaders (used for default read/write implementation)    | 
  write  | 
  {Function(cacheKey, data, callback) -> {void}}  | 
  undefined  | 
    Allows you to override default write cache data to file (e.g. Redis, memcached)    | 
  read  | 
  {Function(cacheKey, callback) -> {void}}  | 
  undefined  | 
    Allows you to override default read cache data from file    | 
webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'cache-loader',
          'babel-loader'
        ],
        include: path.resolve('src')
      }
    ]
  }
}
 ##
webpack.config.js
// Or different database client - memcached, mongodb, ...
const redis = require('redis');
const crypto = require('crypto');
// ...
// connect to client
// ...
const BUILD_CACHE_TIMEOUT = 24 * 3600; // 1 day
function digest(str) {
  return crypto.createHash('md5').update(str).digest('hex');
}
// Generate own cache key
function cacheKey(options, request) {
  return `build:cache:${digest(request)}`;
}
// Read data from database and parse them
function read(key, callback) {
  client.get(key, (err, result) => {
    if (err) {
      return callback(err);
    }
    if (!result) {
      return callback(new Error(`Key ${key} not found`));
    }
    try {
      let data = JSON.parse(result);
      callback(null, data);
    } catch (e) {
      callback(e);
    }
  });
}
// Write data to database under cacheKey
function write(key, data, callback) {
  client.set(key, JSON.stringify(data), 'EX', BUILD_CACHE_TIMEOUT, callback);
}
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'cache-loader',
            options: {
              cacheKey,
              read,
              write,
            }
          },
          'babel-loader'
        ],
        include: path.resolve('src')
      }
    ]
  }
}
  
 Tobias Koppers  |  
  
 Juho Vepsäläinen  |  
 Joshua Wiens  |  
 Michael Ciniawsky  |  
 Alexander Krasnoyarov  |  
    © JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
    https://webpack.js.org/loaders/cache-loader