Webpack生产构建增量配置问询：SBT集成项目按需增量构建

当然可以实现！不用每次全量删除dist文件夹再重头构建，Webpack本身（尤其是5+版本）加上一些简单配置，就能帮你实现真正的增量构建——完全不需要依赖watch模式，毕竟你要的是在单次构建命令里只处理确实变更的文件，对吧？

1. 启用Webpack持久化磁盘缓存（核心） #

Webpack 5默认支持持久化磁盘缓存，它会把编译后的模块结果存在磁盘上，下次构建时自动对比文件的内容哈希，只重新编译有变更的模块，未改动的直接复用缓存结果。

在你的webpack.config.js中添加如下配置：

module.exports = {
  // 开启磁盘缓存
  cache: {
    type: 'filesystem', // 使用磁盘缓存代替默认的内存缓存
    buildDependencies: {
      config: [__filename] // 当webpack配置文件本身变更时，自动清空缓存
    },
    // 可选：自定义缓存目录，默认在node_modules/.cache/webpack
    // cacheDirectory: path.resolve(__dirname, '.webpack-cache')
  },
  // 其他配置...
};

配置后，Webpack会在首次构建时生成完整的dist目录，后续构建只会编译改动过的文件，对应的输出文件也会更新到dist中，未变更的文件会保留原样。

2. 智能清理dist中的过时文件（代替手动删除） #

如果只依赖缓存，dist目录可能会留下一些不再被项目引用的旧文件（比如你删除了某个src文件后，对应的输出文件还留在dist里）。Webpack 5内置了output.clean选项，可以自动清理这些过时文件，同时保留未变更的有效文件：

module.exports = {
  output: {
    // 自动清理dist中不再被Webpack输出的文件
    clean: true,
    // 可选：精细控制保留哪些文件不被清理
    // clean: {
    //   keep: /\.static\.html$/ // 比如保留所有带.static.html后缀的静态文件
    // },
    // 其他output配置...
  },
  // 其他配置...
};

这个配置会替代你之前手动删除dist的操作，既不会全量清空目录，又能保证dist里只有当前项目需要的文件。

3. 适配SBT构建流程的关键调整 #

因为你的项目是和SBT一起构建的，需要注意两点：

• 移除SBT中手动删除dist的步骤：如果之前SBT脚本里有rm -rf dist或者类似的清理命令，一定要删掉，否则Webpack的增量缓存会被全量删除的操作破坏。
• 确保SBT触发Webpack构建的方式正确：在SBT任务中直接调用webpack --mode production即可，不需要额外的清理操作，让Webpack自己处理缓存和增量构建。

4. 验证增量构建是否生效 #

你可以通过以下方式确认增量构建正常工作：

1. 执行第一次完整构建，记录终端输出的编译模块数量和dist目录的文件修改时间。
2. 修改src中的一个文件（比如某个JS或CSS文件），再次执行构建。
3. 观察终端输出：会看到大部分模块标记为cached，只有变更的模块被重新编译；同时dist目录中只有对应的文件被更新，其他文件的修改时间保持不变。

内容的提问来源于stack exchange，提问作者user3712353