refactor(options): filename to filenameTemplate

Author: kevinchappell

README.md

@@ -342,14 +342,14 @@ module.exports = {
 };
 ```
 
-#### Filename as function instead of string
+#### Filename Template Function
 
-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.
+With the `filenameTemplate` 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 `filenameTemplate` to output the generated css into a different directory.
 
 ```javascript
 const miniCssExtractPlugin = new MiniCssExtractPlugin({
-  filename: (chunkData) =>
-    `${chunkData.name.replace('/js/', '/css/')}.[chunkhash:8].css`
+  filenameTemplate: ({chunk}) =>
+    `${chunk.name.replace('/js/', '/css/')}.[chunkhash:8].css`
 })
 ```
 

src/index.js

@@ -17,7 +17,6 @@ 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 CssDependency extends webpack.Dependency {
   constructor(
@@ -123,26 +122,23 @@ class MiniCssExtractPlugin {
   constructor(options) {
     this.options = Object.assign(
       {
-        filename: DEFAULT_FILENAME,
+        filename: '[name].css',
       },
       options
     );
 
     if (!this.options.chunkFilename) {
       const { filename } = this.options;
+
       // Anything changing depending on chunk is fine
-      if (typeof filename === 'string') {
-        if (REGEXP_PLACEHOLDERS.test(filename)) {
-          this.options.chunkFilename = filename;
-        } else {
-          // Elsewise prefix '[id].' in front of the basename to make it changing
-          this.options.chunkFilename = filename.replace(
-            /(^|\/)([^/]*(?:\?|$))/,
-            '$1[id].$2'
-          );
-        }
+      if (REGEXP_PLACEHOLDERS.test(filename)) {
+        this.options.chunkFilename = filename;
       } else {
-        this.options.chunkFilename = `[id].${DEFAULT_FILENAME}`;
+        // Elsewise prefix '[id].' in front of the basename to make it changing
+        this.options.chunkFilename = filename.replace(
+          /(^|\/)([^/]*(?:\?|$))/,
+          '$1[id].$2'
+        );
       }
     }
   }
@@ -189,9 +185,6 @@ class MiniCssExtractPlugin {
           const renderedModules = Array.from(chunk.modulesIterable).filter(
             (module) => module.type === MODULE_TYPE
           );
-          const { filename } = this.options;
-          const filenameTemplate =
-            typeof filename === 'function' ? filename(chunk) : filename;
 
           if (renderedModules.length > 0) {
             result.push({
@@ -202,7 +195,8 @@ class MiniCssExtractPlugin {
                   renderedModules,
                   compilation.runtimeTemplate.requestShortener
                 ),
-              filenameTemplate,
+              filenameTemplate:
+                this.options.filenameTemplate || this.options.filename,
               pathOptions: {
                 chunk,
                 contentHashType: MODULE_TYPE,

test/TestCases.test.js

@@ -40,6 +40,7 @@ describe('TestCases', () => {
           directoryForCase,
           'webpack.config.js'
         ));
+
         for (const config of [].concat(webpackConfig)) {
           Object.assign(
             config,
@@ -56,12 +57,15 @@ describe('TestCases', () => {
             config
           );
         }
+
         webpack(webpackConfig, (err, stats) => {
           if (err) {
             done(err);
             return;
           }
+
           done();
+
           // eslint-disable-next-line no-console
           console.log(
             stats.toString({
@@ -71,6 +75,7 @@ describe('TestCases', () => {
               modules: false,
             })
           );
+
           if (stats.hasErrors()) {
             done(
               new Error(
@@ -80,40 +85,17 @@ describe('TestCases', () => {
                 })
               )
             );
+
             return;
           }
+
           const expectedDirectory = path.resolve(directoryForCase, 'expected');
 
-          for (const file of walkSync(expectedDirectory)) {
-            const actualFilePath = file.replace(
-              expectedDirectory,
-              path.join(outputDirectory, directory)
-            );
-            const expectedContent = fs.readFileSync(file, 'utf-8');
-            const actualContent = fs.readFileSync(actualFilePath, 'utf-8');
+          compareDirectory(outputDirectoryForCase, expectedDirectory);
 
-            expect(actualContent).toEqual(expectedContent);
-          }
           done();
         });
       }, 10000);
     }
   }
 });
-
-/**
- * Synchronously traverse directory of files
- * @param {String} dir
- * @returns {String} path to file or directory
- */
-function* walkSync(dir) {
-  for (const file of fs.readdirSync(dir)) {
-    const pathToFile = path.join(dir, file);
-    const isDirectory = fs.statSync(pathToFile).isDirectory();
-    if (isDirectory) {
-      yield* walkSync(pathToFile);
-    } else {
-      yield pathToFile;
-    }
-  }
-}

test/cases/composes-async/expected/1.1.css renamed to test/cases/composes-async/expected/1.css

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