Hard-source-webpack-plugin 真的还能用吗？配置后反而变慢了？

这插件确实不太行了，webpack 5 出来后就别用了。

webpack 5 自己就带了持久化缓存，功能跟 hard-source 差不多，而且兼容性更好。你这问题本质上是插件和 webpack 5 内置缓存干起来了，所以才有冲突警告。

解决办法很简单：把 hard-source 卸掉，直接用 webpack 5 的内置缓存。

在 webpack.config.js 里加个 cache 配置：

module.exports = {

  // 其他配置...

  cache: {

    type: 'filesystem',

    buildDependencies: {

      config: [__filename]

    }

  }

}

这样配置完，第一次构建会生成缓存到 node_modules/.cache/webpack 目录，第二次构建会快很多。我这边测试一般能快 80% 左右。

另外提醒一下，cache 目录可以加到 .gitignore 里，不需要提交到仓库。

如果还想更快，可以把 compression 关掉，会占用更多磁盘空间但读取更快：

cache: {

  type: 'filesystem',

  compression: false,

  buildDependencies: {

    config: [__filename]

  }

}

hard-source 这个插件早就没人维护了，webpack 5 用户没必要再用它。

这个插件在 webpack5 场景下基本可以扔了，不是你配错了，是它本身就和 webpack5 不太对付。

webpack5 从一开始就内置了持久化缓存机制，效果跟 hard-source 差不多，甚至更稳。你用这个插件反而会冲突，因为它也要写缓存目录，两边抢起来了，所以你会看到那些冲突警告。

正确做法：直接删掉 hard-source-webpack-plugin，然后在 webpack 配置里开启缓存就行：

// webpack.config.js

module.exports = {

  cache: {

    type: 'filesystem', // 开启持久化缓存

    buildDependencies: {

      // 当这些文件变化时，缓存失效

      config: [__filename]

    }

  },

  // 其它配置...

}

这样配置完，第一次构建正常构建，然后会生成缓存文件在 node_modules/.cache/webpack 里。第二次构建会明显快很多，一般能快 70%-80% 的样子。

另外提醒一下，0.13.1 这个版本确实有点老，如果非要坚持用这个插件，可以试试 hard-source-webpack-plugin-exclude-modules-plugin 这个配套插件，但真心没必要，webpack5 原生缓存已经够香了。