diff --git a/packages/mikel-webpack-plugin/README.md b/packages/mikel-webpack-plugin/README.md index 3ebc643..0bbbf39 100644 --- a/packages/mikel-webpack-plugin/README.md +++ b/packages/mikel-webpack-plugin/README.md @@ -51,6 +51,8 @@ This plugin accepts the following options: | `templateContent` | `String` | Template content as a string. | `null` | | `chunks` | `Array` | List of entry names to include in the HTML. | `["main"]` | | `publicPath` | `String` | Public path for the assets. | `"./"` | +| `meta` | `Object` | Additional `` tags to include in the ``. Example: `{author: "John Doe"}`. | `{}` | +| `link` | `Array` | List of `` tags to include in the ``. Example: `[{rel: "icon", href: "/favicon.ico"}] `. | | `templateData` | `Object` | Additional data for the template that will be passes to Mikel. | `{}` | | `templateOptions` | `Object` | Additional options for the Mikel templating (partials, helpers, and functions). | `{}` | diff --git a/packages/mikel-webpack-plugin/index.js b/packages/mikel-webpack-plugin/index.js index 757d585..b1d68ee 100644 --- a/packages/mikel-webpack-plugin/index.js +++ b/packages/mikel-webpack-plugin/index.js @@ -5,6 +5,16 @@ import mikel from "mikel"; // @description global variables const PLUGIN_NAME = "MikelWebpackPlugin"; +// @description get an array value +const getArrayValue = (value, defaultValue) => { + return value && Array.isArray(value) ? value : defaultValue; +}; + +// @description get object value +const getObjectValue = (value, defaultValue) => { + return value && typeof value === "object" ? value : defaultValue; +}; + // @description returns the template content from the given options const getTemplateContent = options => { // using options.template to specify the the absolute path to the template file @@ -57,7 +67,7 @@ export default class MikelWebpackPlugin { } apply(compiler) { - const includeChunks = this.options.chunks || ["main"]; + const includeChunks = getArrayValue(this.options.chunks, ["main"]); const filename = this.options.filename || "index.html"; const template = getTemplateContent(this.options); compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => { @@ -74,6 +84,8 @@ export default class MikelWebpackPlugin { ...(this.options.templateData || {}), options: this.options, assets: assets, + metaTags: getObjectValue(this.options.meta, {}), + linkTags: getArrayValue(this.options.link, []), }; const content = mikel(template, pluginData, this.options.templateOptions || {}); // emit the HTML file as a new asset diff --git a/packages/mikel-webpack-plugin/template.html b/packages/mikel-webpack-plugin/template.html index 63d8da4..32954f7 100644 --- a/packages/mikel-webpack-plugin/template.html +++ b/packages/mikel-webpack-plugin/template.html @@ -3,10 +3,16 @@ + {{#each metaTags}} + + {{/each}} {{options.title}} {{#each assets.css}} {{/each}} + {{#each linkTags}} + + {{/each}} {{#each assets.js}}