where does webpack cache its work for rebuilding?

user_5203563 0
Viewed 3463

This page shows a lot of compilation modes for webpack, and some of them rebuild faster than they build.

enter image description here

I am trying to measure the speed of different build-tools, but I can't figure out if I am building or rebuilding. I mean.. what files do I have to clear to make sure that I am rebuilding? Just the target directory? Or is there another cache somewhere?

For example is the second build here a build or a rebuild the second time?

node_modules/.bin/webpack --output-path ~/target
rm -r target
node_modules/.bin/webpack --output-path ~/target

if that rebuilds, what to I have to clear to make it build again?

and does the second one here build or rebuild?

node_modules/.bin/webpack --output-path ~/target
node_modules/.bin/webpack --output-path ~/target

And if that is another build, what do I have to do to rebuild?

(webpack 4)

babeljs webpack
1 Answers

TL;DR: "rebuild" only happens during watch mode or development mode.

Webpack

Webpack doesn't seem to cache to a file, but only in memory.

cache

Cache the generated webpack modules and chunks to improve build speed. Caching will be automatically enabled by default while in watch mode and webpack is set to mode development.

Webpack docs | cache options

Since it's only enabled in development & watch mode by default, each of your command should be a fresh build. You can either turn off this cache options to be sure, or specifically target production:

node_modules/.bin/webpack --output-path ~/target --mode=production

I run into this question right after checking out the new changes in webpack 5, one of which was to allow caching to a local file.

cache: Object removed: Setting to a memory-cache object is no longer possible

cache.type added: It's now possible to choose between "memory" and "filesystem"

I take it that it means that currently in webpack 4 it's not possible to have cache in filesystem.

Edit: You didn't mention it in the question, but I saw just now you mentioned babel in the reasoning for the bounty.

Babel

If you use babel-loader, there's a cacheDirectory option that's false by default. However, if enabled, the default directory is in node_modules/.cache/babel-loader.

Here's the snippet about it in the docs, emphasis mine:

cacheDirectory: Default false. When set, the given directory will be used to cache the results of the loader. Future webpack builds will attempt to read from the cache to avoid needing to run the potentially expensive Babel recompilation process on each run. If the value is set to true in options ({cacheDirectory: true}), the loader will use the default cache directory in node_modules/.cache/babel-loader or fallback to the default OS temporary file directory if no node_modules folder could be found in any root directory.

babel-loader options

user_103409700
Related