Using ProgressPlugin with MiniCssExtractPlugin causes FS cache pack to be invalidated

Bug report

What is the current behavior? It appears that when using ProgressPlugin, MiniCssExtractPlugin and File System cache, the first cache pack gets invalidated with the following reason Pack got invalid because of write to: ProgressPlugin|counts

If the current behavior is a bug, please provide the steps to reproduce.

const { resolve } = require("path");
const { ProgressPlugin } = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "development",
  entry: {
    styles: ["./style.css"],
  },
  output: {
    path: resolve(__dirname, "dist"),
    filename: "[name].js",
  },
  plugins: [new MiniCssExtractPlugin(), new ProgressPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  infrastructureLogging: {
    level: "verbose",
  },
  cache: {
    profile: true,
    type: "filesystem",
    maxMemoryGenerations: 1,
  },
};

➜  webpack-test yarn webpack              
$ /Users/cli-reproductions/webpack-test/node_modules/.bin/webpack
    [webpack-cli] Compiler starting... 
    [webpack-cli] Compiler is using config: '/Users/cli-reproductions/webpack-test/webpack.config.js'
<t> [webpack.cache.PackFileCacheStrategy] restore cache container: 35.202082 ms
    [IdleFileCachePlugin] Initial cache was generated and cache will be persisted in 5s.
    [webpack-cli] Compiler finished
    [webpack.cache.PackFileCacheStrategy] Pack got invalid because of write to: ResolverCachePlugin|normal|dependencyType=|esm|path=|/Users/cli-reproductions/webpack-test|request=|./style.css
    [webpack.cache.PackFileCacheStrategy] Storing pack...
<t> [webpack.cache.PackFileCacheStrategy] resolve build dependencies: 762.821528 ms
<t> [webpack.cache.PackFileCacheStrategy] snapshot build dependencies: 21.222197 ms
    [webpack.cache.PackFileCacheStrategy] 27 fresh items in cache put into pack 0
<t> [webpack.cache.PackFileCacheStrategy] store pack: 27.86769 ms
    [webpack.cache.PackFileCacheStrategy] Stored pack (27 items, 1 files, 0 MiB)
asset styles.js 2.03 KiB [compared for emit] (name: styles)
asset styles.css 222 bytes [compared for emit] (name: styles)
Entrypoint styles 2.25 KiB = styles.css 222 bytes styles.js 2.03 KiB
orphan modules 2.76 KiB (javascript) 937 bytes (runtime) [orphan] 7 modules
runtime modules 274 bytes 1 module
cacheable modules 50 bytes (javascript) 21 bytes (css/mini-extract)
  ./style.css 50 bytes [built] [code generated]
  css ./node_modules/css-loader/dist/cjs.js!./style.css 21 bytes [built] [code generated]
webpack 5.64.4 compiled successfully in 281 ms
✨  Done in 1.69s.


➜  webpack-test yarn webpack 
$ /Users/cli-reproductions/webpack-test/node_modules/.bin/webpack
    [webpack-cli] Compiler starting... 
    [webpack-cli] Compiler is using config: '/Users/cli-reproductions/webpack-test/webpack.config.js'
<t> [webpack.cache.PackFileCacheStrategy] restore cache container: 59.647659 ms
<t> [webpack.cache.PackFileCacheStrategy] check build dependencies: 43.416812 ms
<t> [webpack.cache.PackFileCacheStrategy] restore cache content metadata: 2.01511 ms
    [webpack.cache.PackFileCacheStrategy] starting to restore cache content 0 (32.8 KiB) because of request to: ProgressPlugin|counts
<t> [webpack.cache.PackFileCacheStrategy] restore cache content 0 (32.8 KiB): 10.16656 ms
    [IdleFileCachePlugin] Initial cache was generated and cache will be persisted in 5s.
    [webpack-cli] Compiler finished
    [webpack.cache.PackFileCacheStrategy] Pack got invalid because of write to: ProgressPlugin|counts
    [webpack.cache.PackFileCacheStrategy] Storing pack...
    [webpack.cache.PackFileCacheStrategy] 1 fresh items in cache put into pack 1
<t> [webpack.cache.PackFileCacheStrategy] store pack: 48.41304 ms
    [webpack.cache.PackFileCacheStrategy] Stored pack (27 items, 2 files, 0 MiB)
asset styles.js 2.03 KiB [compared for emit] (name: styles)
asset styles.css 222 bytes [compared for emit] (name: styles)
Entrypoint styles 2.25 KiB = styles.css 222 bytes styles.js 2.03 KiB
cached modules 50 bytes (javascript) 21 bytes (css/mini-extract) 274 bytes (runtime) [cached] 3 modules
webpack 5.64.4 compiled successfully in 278 ms
✨  Done in 0.94s.

What is the expected behavior? I expect that since the are no file changes the pack is not invalidated.

Other relevant information: webpack version: 5.65.0 Node.js version: 14.18.1 Operating System: darwin x64 Additional tools:

[markjm]

I believe this is a bug in LoaderPlugin not calling processModuleDependencies when using loaderContext.importModule (used in MiniCssExtractPlugin).

We can narrow it down to this location by noting this bug isnt present when experimentalUseImportModule = false.

Since css-loader is injecting other imports (css-loader\\dist\\runtime\\api.js, etc), they need to be accounted for in the packs, else on future runs (when styles.css is unchanged -> cached -> doesnt run through pitch of MiniCssExtractPlugin.loader), these dependencies show up as not previously known (in this case, via ProgressPlugin not seeing any build for these modules).

[alexander-akait]

Yep, bug, thanks for issue