feat: allow filename to be a {Function}

src/index.js

@@ -170,7 +170,7 @@ class MiniCssExtractPlugin {
                   renderedModules,
                   compilation.runtimeTemplate.requestShortener
                 ),
-              filenameTemplate: this.options.filename,
+              filenameTemplate: this.getFilename(chunk, this.options.filename),
               pathOptions: {
                 chunk,
                 contentHashType: NS,
@@ -194,7 +194,10 @@ class MiniCssExtractPlugin {
                   renderedModules,
                   compilation.runtimeTemplate.requestShortener
                 ),
-              filenameTemplate: this.options.chunkFilename,
+              filenameTemplate: this.getFilename(
+                chunk,
+                this.options.chunkFilename
+              ),
               pathOptions: {
                 chunk,
                 contentHashType: NS,
@@ -260,7 +263,9 @@ class MiniCssExtractPlugin {
           if (Object.keys(chunkMap).length > 0) {
             const chunkMaps = chunk.getChunkMaps();
             const linkHrefPath = mainTemplate.getAssetPath(
-              JSON.stringify(this.options.chunkFilename),
+              JSON.stringify(
+                this.getFilename(chunk, this.options.chunkFilename)
+              ),
               {
                 hash: `" + ${mainTemplate.renderCurrentHashCode(hash)} + "`,
                 hashWithLength: (length) =>
@@ -366,6 +371,16 @@ class MiniCssExtractPlugin {
     });
   }
 
+  getFilename(chunk, filename) {
+    console.log('--chunk--');
+    console.log(chunk);
+    return this.isFunction(filename) ? filename(chunk) : filename;
+  }
+
+  isFunction(functionToCheck) {
+    return typeof functionToCheck === 'function';
+  }
+
   getCssChunkObject(mainChunk) {
     const obj = {};
     for (const chunk of mainChunk.getAllAsyncChunks()) {

test/cases/filename-function/app.js

@@ -0,0 +1 @@
+import './style.css';

test/cases/filename-function/expected/index.css

@@ -0,0 +1,2 @@
+body { background: red; }
+

test/cases/filename-function/expected/this.is.app.css

@@ -0,0 +1,2 @@
+body { background: red; }
+

test/cases/filename-function/index.js

@@ -0,0 +1 @@
+import './style.css';

test/cases/filename-function/style.css

@@ -0,0 +1 @@
+body { background: red; }

test/cases/filename-function/webpack.config.js

@@ -0,0 +1,25 @@
+const Self = require('../../../');
+
+module.exports = {
+  entry: {
+   index: './index.js', 
+   app: './app.js', 
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          Self.loader,
+          'css-loader',
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: (chunk) => chunk.name == 'app' ? 'this.is.app.css' : `[name].css`,
+      chunkFilename: (chunk) => '[name].css',
+    }),
+  ],
+};