非常教程

Webpack参考手册

装载 | Loaders

cache-loader

检查以下 loaders 在磁盘上的结果。

安装

npm install --save-dev cache-loader

用法

在一些性能开销较大的 loader 之前添加此 loader,以将结果缓存到磁盘里。

webpack.config.js

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

Note️ 请注意,保存读取和保存缓存文件会产生开销,因此只能使用此加载程序来缓存昂贵的加载程序。

选项

Name

Type

Default

Description

cacheDirectory

{String}

path.resolve('.cache-loader')

Provide a cache directory where cache items should be stored

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.

例子

webpack.config.js

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

webpack.config.js

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