html-bundler-webpack-plugin
Advanced tools
html-bundler-webpack-plugin - npm Package Compare versions
Comparing version 1.1.2 to 1.2.0
| # Change log | ||
| ## 1.2.0 (2023-02-21) | ||
| - feat: set the config option `root` of the Eta preprocessor as current working dir by defaults, | ||
| now you can use the template root path, e.g.: | ||
| ```html | ||
| <%~ includeFile('/src/views/partials/header') %> | ||
| ``` | ||
| - test: add test `async` preprocessor for Eta | ||
| - docs: add `back to contents` navigation in readme, improve readme | ||
| ## 1.1.2 (2023-02-20) | ||
@@ -4,0 +13,0 @@ - fix: resolving of assets under Windows |
| { | ||
| "name": "html-bundler-webpack-plugin", | ||
| "version": "1.1.2", | ||
| "version": "1.2.0", | ||
| "description": "HTML bundler plugin for webpack handels HTML template as entry point, extracts CSS and JS from their sources specified in HTML.", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
109
README.md
@@ -93,2 +93,3 @@ <div align="center"> | ||
| <a id="contents" name="contents" href="#contents"></a> | ||
| ## Contents | ||
@@ -254,3 +255,3 @@ | ||
| #### [↑ back to contents](#contents) | ||
| <a id="plugin-options" name="plugin-options" href="#plugin-options"></a> | ||
@@ -343,2 +344,3 @@ ## Plugin options | ||
| #### [↑ back to contents](#contents) | ||
| <a id="option-outputPath" name="option-outputPath" href="#option-outputPath"></a> | ||
@@ -370,2 +372,3 @@ ### `outputPath` | ||
| #### [↑ back to contents](#contents) | ||
| <a id="option-css" name="option-css" href="#option-css"></a> | ||
@@ -424,3 +427,3 @@ ### `css` | ||
| #### [↑ back to contents](#contents) | ||
| <a id="option-js" name="option-js" href="#option-js"></a> | ||
@@ -469,3 +472,3 @@ ### `js` | ||
| #### [↑ back to contents](#contents) | ||
| <a id="option-postprocess" name="option-postprocess" href="#option-postprocess"></a> | ||
@@ -515,3 +518,3 @@ ### `postprocess` | ||
| #### [↑ back to contents](#contents) | ||
| <a id="option-minify" name="option-minify" href="#option-minify"></a> | ||
@@ -563,2 +566,3 @@ ### `minify` | ||
| #### [↑ back to contents](#contents) | ||
| <a id="loader-options" name="loader-options" href="#loader-options"></a> | ||
@@ -778,2 +782,3 @@ ## Loader options | ||
| #### [↑ back to contents](#contents) | ||
| <a id="loader-option-preprocessor" name="loader-option-preprocessor" href="#loader-option-preprocessor"></a> | ||
@@ -791,3 +796,10 @@ ### `preprocessor` | ||
| ```js | ||
| preprocessor = (template, { data }) => Eta.render(template, data, { async: true, useWith: true }); | ||
| const config = { | ||
| // defaults async is false, because the `includeFile()` function is sync, | ||
| // wenn async is true then must be used `await includeFile()` | ||
| async: false, | ||
| useWith: true, // to use data in template without `it.` scope | ||
| root: process.cwd(), | ||
| }; | ||
| preprocessor = (template, { data }) => Eta.render(template, data, config); | ||
| ``` | ||
@@ -906,5 +918,5 @@ | ||
| --- | ||
| #### [↑ back to contents](#contents) | ||
| <a id="setup-hmr" name="setup-hmr" href="#setup-hmr"></a> | ||
@@ -939,5 +951,5 @@ ## Setup HMR live reload | ||
| --- | ||
| #### [↑ back to contents](#contents) | ||
| <a id="recipe-use-images-in-html" name="recipe-use-images-in-html" href="#recipe-use-images-in-html"></a> | ||
@@ -991,2 +1003,5 @@ ## How to use source images in HTML | ||
| --- | ||
| #### [↑ back to contents](#contents) | ||
| <a id="recipe-responsive-images" name="recipe-responsive-images" href="#recipe-responsive-images"></a> | ||
@@ -1064,2 +1079,5 @@ ## How to resize and generate responsive images | ||
| --- | ||
| #### [↑ back to contents](#contents) | ||
| <a id="recipe-preload-fonts" name="recipe-preload-fonts" href="#recipe-preload-fonts"></a> | ||
@@ -1113,3 +1131,5 @@ ## How to preload source fonts in HTML | ||
| --- | ||
| #### [↑ back to contents](#contents) | ||
| <a id="recipe-inline-css" name="recipe-inline-css" href="#recipe-inline-css"></a> | ||
@@ -1163,2 +1183,5 @@ ## How to inline CSS in HTML | ||
| --- | ||
| #### [↑ back to contents](#contents) | ||
| <a id="recipe-inline-js" name="recipe-inline-js" href="#recipe-inline-js"></a> | ||
@@ -1213,2 +1236,5 @@ ## How to inline JS in HTML | ||
| --- | ||
| #### [↑ back to contents](#contents) | ||
| <a id="recipe-inline-image" name="recipe-inline-image" href="#recipe-inline-image"></a> | ||
@@ -1251,2 +1277,5 @@ ## How to inline SVG, PNG images in HTML | ||
| --- | ||
| #### [↑ back to contents](#contents) | ||
| <a id="recipe-template-engine" name="recipe-template-engine" href="#recipe-template-engine"></a> | ||
@@ -1271,3 +1300,3 @@ ## How to use a template engine | ||
| <a id="using-template-eta" name="using-template-eta" href="#using-template-eta"></a> | ||
| #### Using the Eta | ||
| ### Using the Eta | ||
| _Supported "out of the box"_ | ||
@@ -1287,2 +1316,3 @@ | ||
| </ul> | ||
| <%~ includeFile('/src/views/partials/footer') %> | ||
| </body> | ||
@@ -1298,2 +1328,10 @@ </html> | ||
| const EtaConfig = { | ||
| // defaults async is false, because the `includeFile()` function is sync, | ||
| // wenn async is true then must be used `await includeFile()` | ||
| async: false, | ||
| useWith: true, // to use data in template without `it.` scope | ||
| root: process.cwd(), | ||
| }; | ||
| module.exports = { | ||
@@ -1320,4 +1358,3 @@ plugins: [ | ||
| options: { | ||
| // note: set the `useWith: true` for compatibility with EJS | ||
| preprocessor: (template, { data }) => Eta.render(template, data, { useWith: true }), // <= change | ||
| preprocessor: (template, { data }) => Eta.render(template, data, EtaConfig), // <= change | ||
| }, | ||
@@ -1340,7 +1377,7 @@ }, | ||
| > to use variables in template without the Eta-specific `it.` scope | ||
| #### [↑ back to contents](#contents) | ||
| <a id="using-template-ejs" name="using-template-ejs" href="#using-template-ejs"></a> | ||
| #### Using the EJS | ||
| _Supported "out of the box"_ | ||
| ### Using the EJS | ||
| _Basic support "out of the box"_ | ||
@@ -1357,2 +1394,3 @@ For example, there is the template _index.ejs_ | ||
| </ul> | ||
| <%- include('/src/views/partials/footer.html'); %> | ||
| </body> | ||
@@ -1368,2 +1406,9 @@ </html> | ||
| // create EJS options | ||
| const ejsConfig = { | ||
| root: process.cwd(), // define root template path when using `include()` | ||
| async: true, // optional, async rendering | ||
| } | ||
| module.exports = { | ||
@@ -1390,3 +1435,3 @@ plugins: [ | ||
| options: { | ||
| preprocessor: (template, { data }) => ejs.render(template, data), // <= change | ||
| preprocessor: (template, { data }) => ejs.render(template, data, ejsConfig), // <= change | ||
| }, | ||
@@ -1402,7 +1447,8 @@ }, | ||
| > | ||
| > The [default loader](default-loader) already support the EJS. You can omit it in Webpack config. | ||
| > The [default loader](default-loader) already support the simple syntax of EJS. | ||
| > You can omit it in Webpack config when you don't use `include()`. | ||
| #### [↑ back to contents](#contents) | ||
| <a id="using-template-handlebars" name="using-template-handlebars" href="#using-template-handlebars"></a> | ||
| #### Using the Handlebars | ||
| ### Using the Handlebars | ||
@@ -1476,4 +1522,5 @@ For example, there is the template _index.hbs_ | ||
| #### [↑ back to contents](#contents) | ||
| <a id="using-template-mustache" name="using-template-mustache" href="#using-template-mustache"></a> | ||
| #### Using the Mustache | ||
| ### Using the Mustache | ||
@@ -1528,5 +1575,5 @@ For example, there is the template _index.mustache_ | ||
| #### [↑ back to contents](#contents) | ||
| <a id="using-template-nunjucks" name="using-template-nunjucks" href="#using-template-nunjucks"></a> | ||
| #### Using the Nunjucks | ||
| ### Using the Nunjucks | ||
@@ -1583,4 +1630,5 @@ For example, there is the template _index.njk_ | ||
| #### [↑ back to contents](#contents) | ||
| <a id="using-template-liquidjs" name="using-template-liquidjs" href="#using-template-liquidjs"></a> | ||
| #### Using the LiquidJS | ||
| ### Using the LiquidJS | ||
@@ -1640,3 +1688,5 @@ For example, there is the template _index.liquidjs_ | ||
| --- | ||
| #### [↑ back to contents](#contents) | ||
| <a id="recipe-pass-data-to-templates" name="recipe-pass-data-to-templates" href="#recipe-pass-data-to-templates"></a> | ||
@@ -1843,2 +1893,5 @@ ## How to pass data into multiple templates | ||
| --- | ||
| #### [↑ back to contents](#contents) | ||
| <a id="recipe-split-chunks" name="recipe-split-chunks" href="#recipe-split-chunks"></a> | ||
@@ -1887,2 +1940,7 @@ ### How to config `splitChunks` | ||
| > **Note** | ||
| > | ||
| > In the generated HTML all script tags remain in their original places and split chunks will be added there, | ||
| > in the order that Webpack generated. | ||
| In this use case the `optimization.cacheGroups.{cacheGroup}.test` option must match exactly only JS files from `node_modules`: | ||
@@ -1945,3 +2003,5 @@ ```js | ||
| --- | ||
| #### [↑ back to contents](#contents) | ||
| <a id="recipe-split-many-modules" name="recipe-split-many-modules" href="#recipe-split-many-modules"></a> | ||
@@ -2009,5 +2069,5 @@ ### How to split multiple node modules and save under own names | ||
| ``` | ||
| dist/js/npm.popperjs/core.f96a1152.js <- the `popperjs/core` used in bootstrap will be extracted too | ||
| dist/js/npm.bootstrap.f69a4e44.js | ||
| dist/js/npm.underscore.4e44f69a.js | ||
| dist/js/vendor.popperjs/core.f96a1152.js <- `popperjs/core` is extracted from bootstrap | ||
| dist/js/vendor.bootstrap.f69a4e44.js | ||
| dist/js/vendor.underscore.4e44f69a.js | ||
| dist/js/runtime.9cd0e0f9.js <- common runtime code | ||
@@ -2019,2 +2079,3 @@ dist/js/script.3010da09.js | ||
| #### [↑ back to contents](#contents) | ||
| ## Also See | ||
@@ -2021,0 +2082,0 @@ |
@@ -5,7 +5,4 @@ const path = require('path'); | ||
| const isWin = path.sep === '\\'; | ||
| const workingDir = process.env.PWD; | ||
| const isFunction = (value) => typeof value === 'function'; | ||
| const outToConsole = (...args) => process.stdout.write(args.join(' ') + '\n'); | ||
| /** | ||
@@ -24,4 +21,8 @@ * Converts the win path to POSIX standard. | ||
| const isFunction = (value) => typeof value === 'function'; | ||
| const isJSON = (str) => typeof str === 'string' && str.length > 1 && str[0] === '{' && str[str.length - 1] === '}'; | ||
| const outToConsole = (...args) => process.stdout.write(args.join(' ') + '\n'); | ||
| /** | ||
@@ -82,2 +83,3 @@ * Parse the url query. | ||
| outToConsole, | ||
| workingDir, | ||
| }; |
@@ -36,3 +36,3 @@ const { minify } = require('html-minifier-terser'); | ||
| verbose: false, | ||
| minify: false, // TODO: implement | ||
| minify: false, | ||
| sourcePath: null, | ||
@@ -39,0 +39,0 @@ outputPath: null, |
@@ -129,4 +129,11 @@ const Eta = require('eta'); | ||
| if (this.options.preprocessor !== false) { | ||
| // note: set the `useWith: true` option to use data in template without `it.` scope | ||
| return (template, { data = {} }) => Eta.render(template, data, { async: true, useWith: true }); | ||
| const config = { | ||
| // defaults async is false, because the `includeFile()` function is sync, | ||
| // wenn async is true then must be used `await includeFile()` | ||
| async: false, | ||
| useWith: true, // to use data in template without `it.` scope | ||
| root: process.cwd(), | ||
| }; | ||
| return (template, { data = {} }) => Eta.render(template, data, config); | ||
| } | ||
@@ -133,0 +140,0 @@ |
| const path = require('path'); | ||
| const { isWin, isFunction, pathToPosix, parseQuery, outToConsole } = require('../Common/Helpers'); | ||
| const { isWin, isFunction, workingDir, pathToPosix, parseQuery, outToConsole } = require('../Common/Helpers'); | ||
| const workingDir = process.env.PWD; | ||
| /** | ||
@@ -8,0 +6,0 @@ * Return path of file relative by working directory. |
Improved metrics
- Total package byte prevSize
- increased by1.15%
221368
- Lines of code
- increased by0.17%
4174
- Number of lines in readme file
- increased by3.05%
2058