I want to make use of Dockerfile mount caches so that the Webpack bundling process happens faster between docker runs. I have caching set up properly in all my Webpack config files, and my production dockerfile looks like this:
FROM node:18.4.0-alpine as SERVER
...
RUN --mount=type=cache,target=./node_modules/.cache/server \
webpack --config=webpack.client.config.js --mode production
FROM node:18.4.0-alpine as CLIENT
...
RUN --mount=type=cache,target=./node_modules/.cache/client \
webpack --config=webpack.server.config.js --mode production
FROM node:18.4.0-alpine as RUNNER
...
COPY --from=CLIENT /frontend/dist ./dist
COPY --from=SERVER /frontend/dist ./dist
CMD ["node", "./dist/server.js"]
This gives Webpack access to a persistent cache that it can use between each docker run.
In my dev configuration, my hot module reload replacement middleware component builds the client during runtime like this, as instructed by the docs:
hmr.js
const { default: webpackConfig } = await import('../../../webpack/webpack.client.dev.config');
const compiler = webpack(webpackConfig); // this packs the client code
const { publicPath } = webpackConfig.output;
const middleware = [
webpackDevMiddleware(compiler, { publicPath }),
webpackHotMiddleware(compiler),
];
return middleware;
Unfortunately, this means that I can't make use of docker mount caches since --mount=type=cache is only allowed for RUN commands. Is there any way to bundle the client Webpack before the server runtime in order to make use of the dockerfile mount cache?
