feat(mini-css-extract-plugin): missing moduleFilename option (#42505)

- update type definition with missig `moduleFilename` option
- update tests
- minor code cleanup via Prettier

https://github.com/webpack-contrib/mini-css-extract-plugin#module-filename-option

Thanks!

types/mini-css-extract-plugin/index.d.ts

@@ -3,10 +3,10 @@
 // Definitions by: JounQin <https://github.com/JounQin>
 //                 Katsuya Hino <https://github.com/dobogo>
 //                 Spencer Miskoviak <https://github.com/skovy>
+//                 Piotr Błażejewicz <https://github.com/peterblazejewicz>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.3
 
-import { Plugin } from 'webpack';
+import { compilation, Plugin } from 'webpack';
 
 /**
  * Lightweight CSS extraction webpack plugin
@@ -40,6 +40,12 @@ declare namespace MiniCssExtractPlugin {
          * like in the case of module concatenation and tree shaking.
          */
         esModule?: boolean;
+        /**
+         * With the `moduleFilename` option 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
+         */
+        moduleFilename?: (chunk: compilation.Chunk) => string;
     }
 }
 

types/mini-css-extract-plugin/mini-css-extract-plugin-tests.ts

@@ -34,11 +34,7 @@ configuration = {
             // or any other compile-to-css language
             {
                 test: /\.less$/,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    'css-loader',
-                    'style-loader',
-                ],
+                use: [MiniCssExtractPlugin.loader, 'css-loader', 'style-loader'],
             },
             // You could also use other loaders the same way. I. e. the autoprefixer-loader
         ],
@@ -76,3 +72,21 @@ configuration = {
         }),
     ],
 };
+
+configuration = {
+    // ...
+    plugins: [
+        new MiniCssExtractPlugin({
+            esModule: true,
+        }),
+    ],
+};
+
+configuration = {
+    // ...
+    plugins: [
+        new MiniCssExtractPlugin({
+            moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.css`,
+        }),
+    ],
+};