refactor: remove moduleFilename option in favor filename option

Author: cap-Bernardito

README.md

@@ -511,9 +511,11 @@ module.exports = {
 };
 ```
 
-### Module Filename Option
+### Filename Option as function
 
-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. In the example below, we'll use `moduleFilename` to output the generated css into a different directory.
+With the `filename` 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.
+In the example below, we'll use `filename` to output the generated css into a different directory.
 
 **webpack.config.js**
 
@@ -523,7 +525,8 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 module.exports = {
   plugins: [
     new MiniCssExtractPlugin({
-      moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.css`,
+      filename: ({ pathData }) =>
+        `${pathData.chunk.name.replace('/js/', '/css/')}.css`,
     }),
   ],
   module: {

src/index.js

@@ -21,7 +21,6 @@ const pluginName = 'mini-css-extract-plugin';
 const REGEXP_CHUNKHASH = /\[chunkhash(?::(\d+))?\]/i;
 const REGEXP_CONTENTHASH = /\[contenthash(?::(\d+))?\]/i;
 const REGEXP_NAME = /\[name\]/i;
-const REGEXP_PLACEHOLDERS = /\[(name|id|chunkhash)\]/g;
 const DEFAULT_FILENAME = '[name].css';
 
 class CssDependencyTemplate {
@@ -108,7 +107,6 @@ class MiniCssExtractPlugin {
     this.options = Object.assign(
       {
         filename: DEFAULT_FILENAME,
-        moduleFilename: () => this.options.filename || DEFAULT_FILENAME,
         ignoreOrder: false,
       },
       options
@@ -117,15 +115,24 @@ class MiniCssExtractPlugin {
     if (!this.options.chunkFilename) {
       const { filename } = this.options;
 
-      // Anything changing depending on chunk is fine
-      if (filename.match(REGEXP_PLACEHOLDERS)) {
-        this.options.chunkFilename = filename;
+      if (typeof filename !== 'function') {
+        const hasName = filename.includes('[name]');
+        const hasId = filename.includes('[id]');
+        const hasChunkHash = filename.includes('[chunkhash]');
+        const hasContentHash = filename.includes('[contenthash]');
+
+        // Anything changing depending on chunk is fine
+        if (hasChunkHash || hasContentHash || hasName || hasId) {
+          this.options.chunkFilename = filename;
+        } else {
+          // Otherwise prefix "[id]." in front of the basename to make it changing
+          this.options.chunkFilename = filename.replace(
+            /(^|\/)([^/]*(?:\?|$))/,
+            '$1[id].$2'
+          );
+        }
       } else {
-        // Elsewise prefix '[id].' in front of the basename to make it changing
-        this.options.chunkFilename = filename.replace(
-          /(^|\/)([^/]*(?:\?|$))/,
-          '$1[id].$2'
-        );
+        this.options.chunkFilename = '[id].css';
       }
     }
   }
@@ -149,6 +156,9 @@ class MiniCssExtractPlugin {
             (module) => module.type === MODULE_TYPE
           );
 
+          const filenameTemplate =
+            chunk.filenameTemplate || this.options.filename;
+
           if (renderedModules.length > 0) {
             result.push({
               render: () =>
@@ -158,8 +168,7 @@ class MiniCssExtractPlugin {
                   renderedModules,
                   compilation.runtimeTemplate.requestShortener
                 ),
-              filenameTemplate: ({ chunk: chunkData }) =>
-                this.options.moduleFilename(chunkData),
+              filenameTemplate,
               pathOptions: {
                 chunk,
                 contentHashType: MODULE_TYPE,
@@ -178,6 +187,9 @@ class MiniCssExtractPlugin {
             (module) => module.type === MODULE_TYPE
           );
 
+          const filenameTemplate =
+            chunk.filenameTemplate || this.options.chunkFilename;
+
           if (renderedModules.length > 0) {
             result.push({
               render: () =>
@@ -187,7 +199,7 @@ class MiniCssExtractPlugin {
                   renderedModules,
                   compilation.runtimeTemplate.requestShortener
                 ),
-              filenameTemplate: this.options.chunkFilename,
+              filenameTemplate,
               pathOptions: {
                 chunk,
                 contentHashType: MODULE_TYPE,

src/plugin-options.json

@@ -3,14 +3,18 @@
   "additionalProperties": true,
   "properties": {
     "filename": {
-      "type": "string"
+      "anyOf": [
+        {
+          "type": "string"
+        },
+        {
+          "instanceof": "Function"
+        }
+      ]
     },
     "chunkFilename": {
       "type": "string"
     },
-    "moduleFilename": {
-      "instanceof": "Function"
-    },
     "ignoreOrder": {
       "type": "boolean"
     }

test/__snapshots__/validate-plugin-options.test.js.snap

@@ -7,15 +7,14 @@ exports[`validate options should throw an error on the "chunkFilename" option wi
 
 exports[`validate options should throw an error on the "filename" option with "true" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
- - options.filename should be a string."
+ - options.filename should be one of these:
+   string | function
+   Details:
+    * options.filename should be a string.
+    * options.filename should be an instance of function."
 `;
 
 exports[`validate options should throw an error on the "ignoreOrder" option with "1" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
  - options.ignoreOrder should be a boolean."
 `;
-
-exports[`validate options should throw an error on the "moduleFilename" option with "true" value 1`] = `
-"Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
- - options.moduleFilename should be an instance of function."
-`;

test/cases/moduleFilename/webpack.config.js

@@ -17,7 +17,9 @@ module.exports = {
   },
   plugins: [
     new Self({
-      moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.css`,
+      filename: (pathData) => {
+        return `${pathData.chunk.name.replace('/js/', '/css/')}.css`;
+      },
     }),
   ],
 };

test/validate-plugin-options.test.js

@@ -3,17 +3,16 @@ import MiniCssExtractPlugin from '../src';
 describe('validate options', () => {
   const tests = {
     filename: {
-      success: ['[name].css'],
+      success: [
+        '[name].css',
+        ({ pathData }) => `${pathData.chunk.name.replace('/js/', '/css/')}.css`,
+      ],
       failure: [true],
     },
     chunkFilename: {
       success: ['[id].css'],
       failure: [true],
     },
-    moduleFilename: {
-      success: [({ name }) => `${name.replace('/js/', '/css/')}.css`],
-      failure: [true],
-    },
     ignoreOrder: {
       success: [true, false],
       failure: [1],