feat: filename can now be a function

Author: jantimon

README.md

@@ -142,7 +142,7 @@ Allowed values are as follows:
 |Name|Type|Default|Description|
 |:--:|:--:|:-----:|:----------|
 |**`title`**|`{String}`|`Webpack App`|The title to use for the generated HTML document|
-|**`filename`**|`{String}`|`'index.html'`|The file to write the HTML to. Defaults to `index.html`. You can specify a subdirectory here too (eg: `assets/admin.html`)|
+|**`filename`**|`{String\|Function}`|`'index.html'`|The file to write the HTML to. Defaults to `index.html`. You can specify a subdirectory here too (eg: `assets/admin.html`). The `[name]` placeholder will be replaced with the entry name. Can also be a function e.g. `(entryName) => entryName + '.html'`. |
 |**`template`**|`{String}`|``|`webpack` relative or absolute path to the template. By default it will use `src/index.ejs` if it exists. Please see the [docs](https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md) for details|
 |**`templateContent`**|`{string\|Function\|false}`|false| Can be used instead of `template` to provide an inline template - please read the [Writing Your Own Templates](https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates) section |
 |**`templateParameters`**|`{Boolean\|Object\|Function}`| `false`| Allows to overwrite the parameters used in the template - see [example](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/template-parameters) |

index.js

@@ -84,16 +84,23 @@ class HtmlWebpackPlugin {
         options.meta = Object.assign({}, options.meta, defaultMeta, userOptions.meta);
       }
 
-      // Get all filenNames to support [name]
-      const multipleOptions = options.filename.includes('[name]')
-        ? Object.keys(compiler.options.entry).map((entryName) => ({
-          ...options,
-          filename: options.filename.replace(/\[name\]/g, entryName)
-        }))
-        : [options];
+      // entryName to fileName conversion
+      const filenameFunction = typeof options.filename === 'function'
+        ? options.filename
+        // Replace '[name]' with entry name
+        : (entryName) => options.filename.replace(/\[name\]/g, entryName);
+
+      /** output filenames for the given entry names */
+      const outputFileNames = new Set(Object.keys(compiler.options.entry).map(filenameFunction));
+
+      /** Option for every entry point */
+      const entryOptions = Array.from(outputFileNames).map((filename) => ({
+        ...options,
+        filename
+      }));
 
       // Hook all options into the webpack compiler
-      multipleOptions.forEach((instanceOptions) => {
+      entryOptions.forEach((instanceOptions) => {
         hookIntoCompiler(compiler, instanceOptions, this);
       });
     });

spec/basic.spec.js

@@ -240,6 +240,40 @@ describe('HtmlWebpackPlugin', () => {
     ['<script src="app_bundle.js', 'Some unique text'], null, done);
   });
 
+  it('allows to use a function to map entry names to filenames', done => {
+    testHtmlPlugin({
+      mode: 'production',
+      entry: {
+        app: path.join(__dirname, 'fixtures/index.js')
+      },
+      output: {
+        path: OUTPUT_DIR,
+        filename: '[name]_bundle.js'
+      },
+      plugins: [new HtmlWebpackPlugin({
+        filename: (entry) => `${entry}.html`
+      })]
+    },
+    ['<script defer="defer" src="app_bundle.js'], 'app.html', done);
+  });
+
+  it('allows to use [name] for file names', done => {
+    testHtmlPlugin({
+      mode: 'production',
+      entry: {
+        app: path.join(__dirname, 'fixtures/index.js')
+      },
+      output: {
+        path: OUTPUT_DIR,
+        filename: '[name]_bundle.js'
+      },
+      plugins: [new HtmlWebpackPlugin({
+        filename: '[name].html'
+      })]
+    },
+    ['<script defer="defer" src="app_bundle.js'], 'app.html', done);
+  });
+
   it('picks up src/index.ejs by default', done => {
     testHtmlPlugin({
       mode: 'production',

typings.d.ts

@@ -60,9 +60,12 @@ declare namespace HtmlWebpackPlugin {
     /**
      * The file to write the HTML to.
      * Supports subdirectories eg: `assets/admin.html`
+     * [name] will be replaced by the entry name
+     * Supports a function to generate the name
+     *
      * @default 'index.html'
      */
-    filename: string;
+    filename: string | ((entryName: string) => string);
     /**
      * By default the public path is set to `auto` - that way the html-webpack-plugin will try
      * to set the publicPath according to the current filename and the webpack publicPath setting