html-index-file-webpack-plugin
Generates an Index.html with a list of links to pages/files
Html Index Pagelinks plugin for Webpack
Generates an Index.html (customizable) with a list of links to pages/files in your Webpack project to save time. You can fully customize which type, name and/or basepath of pages/files will be included in the list with a regex. Examples: html,htm,js,ts,css,png,jpg,gif,svg,etc..
Customization
output: //Change the default (index.html) path and name of the destination file test: //A regex to decide which files will be in the the list of pages. title: //Title of the index.html file templates: //Change the content of the index.html file header: '<h1>[title]</h1><ul>' file: '<li><a href="[filePath]">[fileName]</a><li>' { return filePath; } { return filePath0 + filePath; } footer: '</ul>'
Install:
$ npm install --save-dev html-index-pagelinks-webpack-plugin
Usage:
Just pass the optional options to the plugin as the first argument.
In your webpack.config.js
:
var HtmlIndexPagelinksPlugin = ; moduleexports = // ... plugins: //Add the plugin last options
Options:
In your webpack.config.js
:
moduleexports = plugins: output: 'path/index.htm' // The path and name of the destination file. // Default: 'index.html' test: /.html$/ // A regex to decide which files will be in the the list of pages. // (Works just like the test rules of Webpack). // Default: /.html$/ // Examples: // /.md$/ Ending with .md // /^\/Directory1\/Directory2\// Starting with /Directory1/Directory2/ // /.js$/ Ending with .js // /.(html|html)$/ Ending with .html or .htm // /.(svg|jpg|jpeg|png|gif)$/ Ending with .svg .jpg .jpeg .png or .gif title: 'Project title' // Title of the index.html file. // Default: 'Index' // Specify custom templates to override the default content of the index.html file templates: // Generates the html before the list // If you are creating an html file here you can also add the head tag or styling // Parameters: title { return `<h1></h1><ul>` } // Generates the html for a link to a file // Parameters: filePath, fileName { return `<li><a href=""></a></li>` } // Modifies the filePath in the file template // Parameters: filePath { return filePath; } // Modifies the fileName parameter in the file template // Parameters: filePath { return filePath0 + filePath; } // Generates the html after the list { return `</ul>` }
Feedback & Bugs:
Feel free to open issues to propose stuff and participate. Pull requests are also welcome.