Skip to content

Commit

Permalink
feat: filename can now be a function
Browse files Browse the repository at this point in the history
  • Loading branch information
jantimon committed Jan 20, 2021
1 parent 7e2b208 commit c5beb4b
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 10 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) |
Expand Down
23 changes: 15 additions & 8 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
Expand Down
34 changes: 34 additions & 0 deletions spec/basic.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
5 changes: 4 additions & 1 deletion typings.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit c5beb4b

Please sign in to comment.