feat: pass whole chunk to filename function

add example to README.md

Author: kevinchappell

README.md

@@ -342,6 +342,17 @@ module.exports = {
 };
 ```
 
+#### Filename as function instead of string
+
+By using a function instead of a string, you can use chunk data to customize the filename. This is particularly useful when dealing with multiple entry points and wanting to get more control out of the filename for a given entry point/chunk. In the example below, the we'll change the filename to output the css to a different directory.
+
+```javascript
+const miniCssExtractPlugin = new MiniCssExtractPlugin({
+  filename: ({ name, chunkhash }) =>
+    `${name.replace('/js/', '/css/')}.[chunkhash:8].css`
+})
+```
+
 #### Long Term Caching
 
 For long term caching use `filename: "[contenthash].css"`. Optionally add `[name]`.

src/index.js

@@ -186,22 +186,8 @@ class MiniCssExtractPlugin {
             (module) => module.type === MODULE_TYPE
           );
           const { filename } = this.options;
-          let filenameTemplate = filename;
-          if (typeof filename === 'function') {
-            const {
-              hash: chunkhash,
-              contentHash: contenthash,
-              name,
-              id,
-            } = chunk;
-
-            filenameTemplate = filename({
-              chunkhash,
-              contenthash,
-              name,
-              id,
-            });
-          }
+          const filenameTemplate =
+            typeof filename === 'function' ? filename(chunk) : filename;
 
           if (renderedModules.length > 0) {
             result.push({

test/cases/filename/webpack.config.js

@@ -17,8 +17,8 @@ module.exports = {
   },
   plugins: [
     new Self({
-      filename: ({ name, chunkhash }) =>
-        `${name.replace('/js/', '/css/')}.${chunkhash.substring(0, 8)}.css`,
+      filename: ({ name }) =>
+        `${name.replace('/js/', '/css/')}.css`,
     }),
   ],
 };