diff --git a/README.md b/README.md index 4a16551e..c7f58e6d 100644 --- a/README.md +++ b/README.md @@ -471,7 +471,10 @@ See [boilerplate](https://github.com/webdiscus/webpack-html-scss-boilerplate) - [entry as an array](#option-entry-array) (array notation) - [entry as an object](#option-entry-object) (object notation) - [entry as a path](#option-entry-path) (find templates in a directory recursively) - - [entry data](#option-entry-data) (pass data in the single template as an object or a file) + - [entry data](#option-entry-data) (pass data in the template) + - [data as object](#option-entry-data-object) (pass data in the template as an object) + - [data as `JSON` file](#option-entry-data-json) (load data from JSON file) + - [data as `JS` file](#option-entry-data-js) (dynamically load data from JS where can be used DB) - [entry dynamic](#option-entry-path) (entry as a path to template files) - [entryFilter](#option-entry-filter) (filter for entry dynamic) - [outputPath](#option-outputpath) (output path of HTML file) @@ -699,6 +702,9 @@ module.exports = { }; ``` +#### [↑ back to contents](#contents) + + ### `entry` @@ -1286,7 +1292,15 @@ Type: `EntryObject | Array | string`. The `EntryObject` is identical to [Webpack entry](https://webpack.js.org/configuration/entry-context/#entry) plus additional `data` property to pass custom variables into the HTML template. -Specify template files as entry points in the `entry` option. +> ℹ️ **Note** +> +> You can define templates both in Webpack `entry` and in the `entry` option of the plugin. The syntax is identical. +> But the `data` property can only be used in the `entry` option of the plugin. + + +> 💡 **Tip** +> +> Specify template files as entry points in the `entry` plugin option. An HTML template is a starting point for collecting all the dependencies used in your web application. Specify source scripts (JS, TS) and styles (CSS, SCSS, LESS, etc.) directly in HTML. @@ -1396,6 +1410,9 @@ The example above is equivalent to the simple syntax: The `data` is passed into [`preprocessor`](#loader-option-preprocessor) to render the template with variables. + +**data as `object`** + When the `data` is an `object`, it will be loaded once with Webpack start. After changing the data, you **need to restart Webpack**. @@ -1414,12 +1431,15 @@ For example: } ``` + +**data as `JSON` file** + When the `data` is a `string`, it must be an absolute or relative path to a file. The file can be a `JSON` file or a `JS` file that exports the data as an object. Use the `data` as a file if you want to get dynamic data in a template. The data file will be reloaded after changes, **without restarting Webpack**. -For example: +For example, using `*.json` data file: ```js { @@ -1441,12 +1461,41 @@ The data file _src/data/home.json_: } ``` -To pass global variables in all templates use the [data](#loader-option-data) loader option. + +**data as `JS` file** + +To load data into a template dynamically you can use `JS` file. +In JS file you can load data from a database. + +For example, using `*.js` data file: + +```js +{ + entry: { + index: { + import: 'src/views/index.html', + // load data from JS file + data: 'src/data/home.js', + }, + }, +} +``` + +The data file _src/data/home.js_: + +```js +// here you can load data from a database +const data = { + title: 'Home', +}; + +module.exports = data; +``` + +> 💡 **Tip** +> +> To pass global variables in all templates use the [data](#loader-option-data) plugin option. -> ℹ️ **Note** -> -> You can define templates both in Webpack `entry` and in the `entry` option of the plugin. The syntax is identical. -> But the `data` property can only be used in the `entry` option of the plugin. #### Entry as an array @@ -2209,7 +2258,7 @@ new HtmlBundlerPlugin({ }), ``` -Please see the details below under the [preprocessor](#loader-option-preprocessor) and the [preprocessorOptions](#loader-option-preprocessorOptions) loader options. +Please see the details below under the [preprocessor](#loader-option-preprocessor) and the [preprocessorOptions](#loader-option-preprocessorOptions) options. #### [↑ back to contents](#contents) @@ -3987,7 +4036,7 @@ The data file will be reloaded after changes. > > The [entry.{name}.data](#option-entry-data) property overrides the same property defined in the loader `data`. -For example, there are variables defined in both the `entry` property and the loader option: +For example, there are variables defined in both the `entry` property and the plugin option: ```js const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');