如何在Docker构建中利用Webpack文件系统缓存加速编译？

1. 优化Dockerfile的依赖缓存层 #

调整Dockerfile构建顺序，让依赖安装层能被缓存，避免修改业务代码时重复执行npm install：

FROM node:latest as assets
WORKDIR /app/

# 优先复制依赖配置文件，复用缓存
COPY files/assets/package*.json /app/
RUN npm install

# 再复制业务代码
COPY files/assets/ /app/
RUN npm run build

FROM nginx:latest
[...] 
COPY --from=assets /app/dist/ /app/static/
[...] 

2. 启用Webpack文件系统缓存 #

在files/assets/目录下创建webpack.config.js，配置Webpack的文件系统缓存，指定缓存存储路径：

module.exports = {
  cache: {
    type: 'filesystem',
    cacheDirectory: './.webpack-cache', // 固定缓存目录
    buildDependencies: {
      config: [__filename] // 配置文件变更时重置缓存
    }
  },
  // 其他Webpack配置项...
};

3. 用Docker Compose挂载持久化缓存目录 #

修改docker-compose.yml，通过绑定挂载将主机指定目录与容器内的依赖、缓存目录关联，实现缓存持久化，且无需主机安装Node.js：

version: "3.5"
services:
  app:
    build: .
    volumes:
      # 挂载node_modules缓存
      - ./.docker-cache/node_modules:/app/node_modules
      # 挂载Webpack文件系统缓存
      - ./.docker-cache/webpack-cache:/app/.webpack-cache
      # 实时同步业务代码修改
      - ./files/assets/:/app/
    command: npm run dev # 开发模式下启用增量构建

4. 配置开发模式的增量构建脚本 #

更新package.json，添加watch命令实现文件变更时自动增量构建：

{
    "dependencies": {
        "webpack": "^5.76.2",
        "webpack-cli": "^5.0.1"
    },
    "scripts": {
        "build": "webpack",
        "dev": "webpack --watch --mode development"
    }
}

方案说明 #

• 首次构建仍需约30秒，但后续构建（包括容器重启）会复用缓存，耗时可缩短至几秒内。
• 主机上的.docker-cache目录会自动生成，所有依赖和缓存文件都集中在此，不会污染主机环境。
• 生产构建可直接使用原npm run build命令，不受开发模式缓存影响。

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