feat: added cache serializer for webpack@5 (#581)

src/CssDependency.js

@@ -1,6 +1,6 @@
 import webpack from 'webpack';
 
-export default class CssDependency extends webpack.Dependency {
+class CssDependency extends webpack.Dependency {
   constructor(
     { identifier, content, media, sourceMap },
     context,
@@ -19,4 +19,53 @@ export default class CssDependency extends webpack.Dependency {
   getResourceIdentifier() {
     return `css-module-${this.identifier}-${this.identifierIndex}`;
   }
+
+  serialize(context) {
+    const { write } = context;
+
+    write(this.identifier);
+    write(this.content);
+    write(this.media);
+    write(this.sourceMap);
+    write(this.context);
+    write(this.identifierIndex);
+
+    super.serialize(context);
+  }
+
+  deserialize(context) {
+    super.deserialize(context);
+  }
 }
+
+if (webpack.util && webpack.util.serialization) {
+  webpack.util.serialization.register(
+    CssDependency,
+    'mini-css-extract-plugin/src/CssDependency',
+    null,
+    {
+      serialize(instance, context) {
+        instance.serialize(context);
+      },
+      deserialize(context) {
+        const { read } = context;
+        const dep = new CssDependency(
+          {
+            identifier: read(),
+            content: read(),
+            media: read(),
+            sourceMap: read(),
+          },
+          read(),
+          read()
+        );
+
+        dep.deserialize(context);
+
+        return dep;
+      },
+    }
+  );
+}
+
+export default CssDependency;

src/CssModule.js

@@ -2,16 +2,24 @@ import webpack from 'webpack';
 
 import { MODULE_TYPE } from './utils';
 
-export default class CssModule extends webpack.Module {
-  constructor(dependency) {
-    super(MODULE_TYPE, dependency.context);
+class CssModule extends webpack.Module {
+  constructor({
+    context,
+    identifier,
+    identifierIndex,
+    content,
+    media,
+    sourceMap,
+  }) {
+    super(MODULE_TYPE, context);
 
     this.id = '';
-    this._identifier = dependency.identifier;
-    this._identifierIndex = dependency.identifierIndex;
-    this.content = dependency.content;
-    this.media = dependency.media;
-    this.sourceMap = dependency.sourceMap;
+    this._context = context;
+    this._identifier = identifier;
+    this._identifierIndex = identifierIndex;
+    this.content = content;
+    this.media = media;
+    this.sourceMap = sourceMap;
   }
 
   // no source() so webpack doesn't do add stuff to the bundle
@@ -55,6 +63,7 @@ export default class CssModule extends webpack.Module {
   build(options, compilation, resolver, fileSystem, callback) {
     this.buildInfo = {};
     this.buildMeta = {};
+
     callback();
   }
 
@@ -65,4 +74,52 @@ export default class CssModule extends webpack.Module {
     hash.update(this.media || '');
     hash.update(this.sourceMap ? JSON.stringify(this.sourceMap) : '');
   }
+
+  serialize(context) {
+    const { write } = context;
+
+    write(this._context);
+    write(this._identifier);
+    write(this._identifierIndex);
+    write(this.content);
+    write(this.media);
+    write(this.sourceMap);
+
+    super.serialize(context);
+  }
+
+  deserialize(context) {
+    super.deserialize(context);
+  }
 }
+
+if (webpack.util && webpack.util.serialization) {
+  webpack.util.serialization.register(
+    CssModule,
+    'mini-css-extract-plugin/src/CssModule',
+    null,
+    {
+      serialize(instance, context) {
+        instance.serialize(context);
+      },
+      deserialize(context) {
+        const { read } = context;
+
+        const dep = new CssModule({
+          context: read(),
+          identifier: read(),
+          identifierIndex: read(),
+          content: read(),
+          media: read(),
+          sourceMap: read(),
+        });
+
+        dep.deserialize(context);
+
+        return dep;
+      },
+    }
+  );
+}
+
+export default CssModule;

test/TestCache.test.js

@@ -0,0 +1,89 @@
+/**
+ * @jest-environment node
+ */
+
+import path from 'path';
+
+import webpack from 'webpack';
+import del from 'del';
+
+const fileSystemCacheDirectory = path.resolve(
+  __dirname,
+  './outputs/cache/type-filesystem'
+);
+
+del.sync(fileSystemCacheDirectory);
+
+describe('TestCache', () => {
+  it('should work', async () => {
+    if (webpack.version[0] !== '4') {
+      const casesDirectory = path.resolve(__dirname, 'cases');
+      const directoryForCase = path.resolve(casesDirectory, 'simple');
+      // eslint-disable-next-line import/no-dynamic-require, global-require
+      const webpackConfig = require(path.resolve(
+        directoryForCase,
+        'webpack.config.js'
+      ));
+
+      const compiler1 = webpack({
+        ...webpackConfig,
+        mode: 'development',
+        context: directoryForCase,
+        cache: {
+          type: 'filesystem',
+          cacheDirectory: fileSystemCacheDirectory,
+          idleTimeout: 0,
+          idleTimeoutForInitialStore: 0,
+        },
+      });
+
+      await new Promise((resolve, reject) => {
+        compiler1.run((error, stats) => {
+          if (error) {
+            reject(error);
+
+            return;
+          }
+
+          expect(stats.compilation.warnings).toHaveLength(0);
+          expect(stats.compilation.errors).toHaveLength(0);
+
+          compiler1.close(() => {
+            resolve();
+          });
+        });
+      });
+
+      const compiler2 = webpack({
+        ...webpackConfig,
+        mode: 'development',
+        context: directoryForCase,
+        cache: {
+          type: 'filesystem',
+          cacheDirectory: fileSystemCacheDirectory,
+          idleTimeout: 0,
+          idleTimeoutForInitialStore: 0,
+        },
+      });
+
+      await new Promise((resolve, reject) => {
+        compiler2.run((error, stats) => {
+          if (error) {
+            reject(error);
+
+            return;
+          }
+
+          expect(stats.compilation.warnings).toHaveLength(0);
+          expect(stats.compilation.errors).toHaveLength(0);
+
+          compiler2.close(() => {
+            resolve();
+          });
+        });
+      });
+    } else {
+      expect(true).toBe(true);
+    }
+  });
+});