webpack 使用hard-source-webpack-plugin缓存编译文件，加快编译速度

hard-source-webpack-plugin 是一个为 webpack 提供中间缓存功能的插件。它可以将模块的编译结果缓存到磁盘中，这样在后续的编译过程中，如果模块的源代码没有发生变化，就可以直接使用缓存的结果，从而加快编译速度。

插件地址

https://www.npmjs.com/package/hard-source-webpack-plugin

new HardSourceWebpackPlugin({
  // 设置缓存文件的存放目录。可以是绝对路径，也可以是相对于 webpack 配置的 context 的相对路径。
  cacheDirectory: 'node_modules/.cache/hard-source/[confighash]',

  // 配置哈希函数，用于生成 webpack 配置的哈希值。可以是字符串或对象。
  // 这里使用 `node-object-hash` 库来生成配置的哈希值。
  configHash: function(webpackConfig) {
    return require('node-object-hash')({sort: false}).hash(webpackConfig);
  },

  // 设置环境哈希值，可以是字符串、对象或函数。
  // 这里定义了一个对象，包含项目的根目录和一些文件，用于生成环境哈希值。
  environmentHash: {
    root: process.cwd(), // 项目根目录
    directories: [], // 需要包含的目录
    files: ['package-lock.json', 'yarn.lock'], // 需要包含的文件
  },

  // 设置插件的信息输出配置。
  info: {
    // 设置模式，可以是 'none' 或 'test'。
    mode: 'none',
    // 设置日志级别，可以是 'debug', 'log', 'info', 'warn', 或 'error'。
    level: 'debug',
  },

  // 设置缓存清理策略。
  cachePrune: {
    // 设置缓存文件的最大存活时间，单位是毫秒。
    // 超过这个时间的缓存文件会被删除。默认是 2 天。
    maxAge: 2 * 24 * 60 * 60 * 1000,

    // 设置缓存文件的总大小阈值，单位是字节。
    // 当缓存文件的总大小超过这个阈值时，会触发缓存清理。默认是 50 MB。
    sizeThreshold: 50 * 1024 * 1024
  },
})

如何使用

下面是如何在项目中使用 hard-source-webpack-plugin 的基本步骤：

1. 首先，你需要安装 hard-source-webpack-plugin：

npm install --save-dev hard-source-webpack-plugin

2. 然后，在你的 webpack 配置文件中引入并使用它：

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  // 其他配置...
  plugins: [
    new HardSourceWebpackPlugin(),
    // 其他插件...
  ],
};

这样，hard-source-webpack-plugin 就会在编译过程中自动缓存模块的结果。

需要注意的是，hard-source-webpack-plugin 在某些情况下可能不会生效，例如：

• 当模块的源代码发生变化时，缓存的结果会被丢弃。
• 当 webpack 配置发生变化时，缓存的结果可能会失效。
• 当模块的依赖关系发生变化时，缓存的结果可能会失效。

此外，hard-source-webpack-plugin 在 webpack 5 中可能需要额外的配置，因为 webpack 5 引入了一些新的缓存机制。在使用 hard-source-webpack-plugin 时，建议查阅其官方文档以获取最新和最准确的信息。

总的来说，hard-source-webpack-plugin 是一个非常有用的插件，可以帮助你提高 webpack 的编译速度，特别是在大型项目中。