draft: refactor project so it sits on top of a standalone app
This commit is contained in:
+576
@@ -0,0 +1,576 @@
|
||||
# Change Log
|
||||
|
||||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||
|
||||
## [4.0.4](https://github.com/jantimon/html-webpack-plugin/compare/v4.0.3...v4.0.4) (2020-04-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Fix querystring encoding ([#1386](https://github.com/jantimon/html-webpack-plugin/issues/1386)) ([4f48a39](https://github.com/jantimon/html-webpack-plugin/commit/4f48a39e5738a5d431be2bec39c1b1f0de800d57)), closes [#1355](https://github.com/jantimon/html-webpack-plugin/issues/1355)
|
||||
|
||||
|
||||
|
||||
## [4.0.3](https://github.com/jantimon/html-webpack-plugin/compare/v4.0.2...v4.0.3) (2020-03-28)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add webpack, tapable and html-minifier-terser as dependencies because of types.d.ts ([238da81](https://github.com/jantimon/html-webpack-plugin/commit/238da8123950f87267954fd448f3e6b0fb1ead17))
|
||||
|
||||
|
||||
|
||||
## [4.0.2](https://github.com/jantimon/html-webpack-plugin/compare/v4.0.1...v4.0.2) (2020-03-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* don't remove trailing slashes from self closing tags by default ([2281e4b](https://github.com/jantimon/html-webpack-plugin/commit/2281e4bfda9b91c4a83d63bfc8df8372d1e6ae9e))
|
||||
|
||||
|
||||
|
||||
## [4.0.1](https://github.com/jantimon/html-webpack-plugin/compare/v4.0.0...v4.0.1) (2020-03-23)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* update typedefs to match with html-minifier-terser ([2698c7e](https://github.com/jantimon/html-webpack-plugin/commit/2698c7e45a7f12113a07b256dc400ec89666130d))
|
||||
|
||||
|
||||
|
||||
# [4.0.0](https://github.com/jantimon/html-webpack-plugin/compare/v3.2.0...v4.0.0) (2020-03-23)
|
||||
|
||||
The summary can be found in the [**release blog post**](https://dev.to/jantimon/html-webpack-plugin-4-has-been-released-125d).
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Add dependencies from the child compilation to the main compilation ([27c3e72](https://github.com/jantimon/html-webpack-plugin/commit/27c3e727b073701bfc739859d8325435d27cbf35))
|
||||
* Add typing for assets(Close jantimon[#1243](https://github.com/jantimon/html-webpack-plugin/issues/1243)) ([9fef060](https://github.com/jantimon/html-webpack-plugin/commit/9fef0603eb532b3e6a1e8871b4568e62f9bba1a3))
|
||||
* allow `contenthash` along with `templatehash` ([049d4d3](https://github.com/jantimon/html-webpack-plugin/commit/049d4d3436092b8beff3f5745e77b20f1c168c4c)), closes [#1033](https://github.com/jantimon/html-webpack-plugin/issues/1033)
|
||||
* Catch and ignore pretty-error errors ([2056139](https://github.com/jantimon/html-webpack-plugin/commit/2056139a9533ff9487506531491c0e5a94003607)), closes [#921](https://github.com/jantimon/html-webpack-plugin/issues/921)
|
||||
* Drop @types/webpack dependency ([d4eb1c7](https://github.com/jantimon/html-webpack-plugin/commit/d4eb1c749316af3964126606fe6c70a233c30fef))
|
||||
* Ignore foreign child compilers ([1422664](https://github.com/jantimon/html-webpack-plugin/commit/14226649aa1bbaf7b174bcacafdbe47d8ba6c851))
|
||||
* Improve perfomance for appcache files ([b94e043](https://github.com/jantimon/html-webpack-plugin/commit/b94e0434f5dbb06ee2179e91ebaa2ce7801937e0))
|
||||
* load script files before style files files in defer script loading mode ([97f9fb9](https://github.com/jantimon/html-webpack-plugin/commit/97f9fb9a68e4d3c3c9453296c352e831f7546937))
|
||||
* Prevent chunks from beeing added multiple times ([d65b37d](https://github.com/jantimon/html-webpack-plugin/commit/d65b37d2c588047e0d81a38f4645fcdb3ead0b9e))
|
||||
* Prevent lodash from being inlined to work around a babel-loader incompatibility ([7f21910](https://github.com/jantimon/html-webpack-plugin/commit/7f21910707a2b53a9a5da3ac9e4b01e36147402f)), closes [#1223](https://github.com/jantimon/html-webpack-plugin/issues/1223)
|
||||
* Remove compilation.getStats() call for performance reasons ([7005a55](https://github.com/jantimon/html-webpack-plugin/commit/7005a557529bee948c5ef0a1b8b44a1a41a28417))
|
||||
* remove useless links for options ([#1153](https://github.com/jantimon/html-webpack-plugin/issues/1153)) ([267e0e0](https://github.com/jantimon/html-webpack-plugin/commit/267e0e0eac155569c822c34f120490bdf3f56d43))
|
||||
* Update references to html-minifier ([24bf1b5](https://github.com/jantimon/html-webpack-plugin/commit/24bf1b5e2a0d087b30d057d1780d8f495aa01e26)), closes [#1311](https://github.com/jantimon/html-webpack-plugin/issues/1311)
|
||||
* **typings.d.ts:** added apply method type to HtmlWwbpackPlugin class definitoin ([8b7255f](https://github.com/jantimon/html-webpack-plugin/commit/8b7255f555423dd1bfa51a3c28700e4bd116f97b)), closes [jantimon#1244](https://github.com/jantimon/issues/1244)
|
||||
* rename `contenthash` to `templatehash` ([4c11c5d](https://github.com/jantimon/html-webpack-plugin/commit/4c11c5dfde9d87d71dce9cf51864648f8e42b912))
|
||||
* Repair typings ([#1166](https://github.com/jantimon/html-webpack-plugin/issues/1166)) ([f4cb241](https://github.com/jantimon/html-webpack-plugin/commit/f4cb241157a9a1fed4721b1abc1f390b09595494))
|
||||
* small type. minifcation instead of minification ([#1154](https://github.com/jantimon/html-webpack-plugin/issues/1154)) ([56037a6](https://github.com/jantimon/html-webpack-plugin/commit/56037a6b2ae4a7606b54f5af213b6a2b8145f95e))
|
||||
* Use src/index.ejs by default if present ([#1167](https://github.com/jantimon/html-webpack-plugin/issues/1167)) ([c27e5e4](https://github.com/jantimon/html-webpack-plugin/commit/c27e5e46a334d9c1e177a521ea7c9a5ba3c6d980))
|
||||
* **chunksorter:** Don't sort chunks by default ([22fb03f](https://github.com/jantimon/html-webpack-plugin/commit/22fb03fb17fdb37d5ce6de00af154b5575a02d3a))
|
||||
* **loader:** switch to loaderUtils.getOptions ([a0a0f0d](https://github.com/jantimon/html-webpack-plugin/commit/a0a0f0dc755fbc3249aa2e1d1c6a4dd307ab8e8a))
|
||||
* **README:** adds a link to template option documentation ([f40aeae](https://github.com/jantimon/html-webpack-plugin/commit/f40aeae312af73c6c5263cd99e81069f41d3b699))
|
||||
* **tests:** Upgrade webpack-recompilation-simulator ([dfe1d10](https://github.com/jantimon/html-webpack-plugin/commit/dfe1d10c4511b0da4354cacf79ca0d5ac7baf862))
|
||||
* Update lodash to 4.17.10 ([cc3bf49](https://github.com/jantimon/html-webpack-plugin/commit/cc3bf4909605879993c22e3048ee520dbdc8fa49))
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* Change the structure of the internal assets object ([37db086](https://github.com/jantimon/html-webpack-plugin/commit/37db0868efdbf334a1b60003fe5bd376cfd8ae01))
|
||||
* Changed hook names and arguments - the hook order is 'beforeAssetTagGeneration', 'alterAssetTags', 'alterAssetTagGroups', 'afterTemplateExecution', 'beforeEmit', 'afterEmit' ([14b4456](https://github.com/jantimon/html-webpack-plugin/commit/14b4456ba67a5b85421b558bbd5f1d59c7b410b3))
|
||||
* Use Webpack 4 APIs ([47efdea](https://github.com/jantimon/html-webpack-plugin/commit/47efdeaf17806f7d4e26aefacc748a92077f904a))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add `.toString` implementation to htmlTags to allow easier rendering ([34d8aa5](https://github.com/jantimon/html-webpack-plugin/commit/34d8aa572c7acc59c26f3b5d15bf489a07aa4c24))
|
||||
* Add default viewport meta tag for default template ([302e39e](https://github.com/jantimon/html-webpack-plugin/commit/302e39e30013b5828bb6c9e7036db951f70d0cf5)), closes [#897](https://github.com/jantimon/html-webpack-plugin/issues/897) [#978](https://github.com/jantimon/html-webpack-plugin/issues/978)
|
||||
* Add defer script loading ([de315eb](https://github.com/jantimon/html-webpack-plugin/commit/de315eb98497f3e5f517d59dbbe120b48c9b8db9))
|
||||
* Add support for relative publicPath ([dbbdd81](https://github.com/jantimon/html-webpack-plugin/commit/dbbdd81de570dd181ea0905a6445fdeb5a784912))
|
||||
* Add support for <base> tag ([#1160](https://github.com/jantimon/html-webpack-plugin/issues/1160)) ([c5d4b86](https://github.com/jantimon/html-webpack-plugin/commit/c5d4b869c196c59cdd6a9c30db58f1f8be07a820))
|
||||
* Add support for minifying inline ES6 inside html templates ([c66766c](https://github.com/jantimon/html-webpack-plugin/commit/c66766cdae3593091dee413b9c585359c24ef068)), closes [#1262](https://github.com/jantimon/html-webpack-plugin/issues/1262)
|
||||
* Add support for the [contenthash] placeholder inside htm file names ([ae8233a](https://github.com/jantimon/html-webpack-plugin/commit/ae8233a04d4105b6e970feaa2c5e11c0b48fd4b7))
|
||||
* Add typings to package.json ([a524e8f](https://github.com/jantimon/html-webpack-plugin/commit/a524e8f24e905d5e51fedd50d33a41328a9b87eb)), closes [#1132](https://github.com/jantimon/html-webpack-plugin/issues/1132)
|
||||
* Allow to return async template parameters ([99f9362](https://github.com/jantimon/html-webpack-plugin/commit/99f9362703055baf0029b8852cb5339b6218829d))
|
||||
* drop workaround for "Uncaught TypeError: __webpack_require__(...) is not a function" to be compatible with webpack 5 ([15ad0d2](https://github.com/jantimon/html-webpack-plugin/commit/15ad0d260443edfdcc953fa08c675c90c063bac7))
|
||||
* Export major version of this plugin ([6ae6f48](https://github.com/jantimon/html-webpack-plugin/commit/6ae6f48ecf92b080809d68092ee8c6825edfe5a4))
|
||||
* merge templateParameters with default template parameters ([1d66e53](https://github.com/jantimon/html-webpack-plugin/commit/1d66e5333bc2aeb8caadf96e572af756d3708d19))
|
||||
* Provide a verbose error message if html minification failed ([7df269f](https://github.com/jantimon/html-webpack-plugin/commit/7df269fd2a840d0800cb259bd559edb0b766e7ab))
|
||||
* **compiler:** Add file dependencies ([bbc07a3](https://github.com/jantimon/html-webpack-plugin/commit/bbc07a3a214e3b693e6c9e3d6404e146a0fc023a))
|
||||
* **compiler:** Use a single compiler for multiple plugin instances ([f29ae88](https://github.com/jantimon/html-webpack-plugin/commit/f29ae886d7fad50e7fbb78ac7ff7d5bd9bc47f49))
|
||||
* **compiler:** Use timestamps to verify cache validity ([0ebcd17](https://github.com/jantimon/html-webpack-plugin/commit/0ebcd1776132262b799f2814659f4d90c3f3c1b3))
|
||||
* Remove selfClosingTag ([5d3d8e4](https://github.com/jantimon/html-webpack-plugin/commit/5d3d8e4b73b7b97dba8bdf5fe1ecf50598040b54))
|
||||
* Remove type="text/javascript" from injected script tags ([b46bf67](https://github.com/jantimon/html-webpack-plugin/commit/b46bf67ae4492a12b60c42c7d26831e480522b49))
|
||||
* Replace jade with pug in examples ([d7ec407](https://github.com/jantimon/html-webpack-plugin/commit/d7ec4078c85b3ed9c2ff84e10fe75392f26a6130))
|
||||
* Switch from jasmine to jest ([ae1f435](https://github.com/jantimon/html-webpack-plugin/commit/ae1f43527945c8ae953c2ba549631f2d090e003a))
|
||||
* **hooks:** Add a helper for easier hook access ([b6dec4b](https://github.com/jantimon/html-webpack-plugin/commit/b6dec4bf1072509282756e8d83ef6ee447485f3a))
|
||||
* **hooks:** Provide static getHook method for access to all html-webpack-plugin hooks ([#995](https://github.com/jantimon/html-webpack-plugin/issues/995)) ([82b34a1](https://github.com/jantimon/html-webpack-plugin/commit/82b34a1dd2e96cbcd715fafe4e97073efd30cc9f))
|
||||
* Simplify <meta> element and charset attribute ([55313be](https://github.com/jantimon/html-webpack-plugin/commit/55313bee9b82ea79157085e48bba4fa2ebfef6a4))
|
||||
* support ES6 template string in default loader ([d6b65dd](https://github.com/jantimon/html-webpack-plugin/commit/d6b65dd1531038deac1be87c2087da5955903d24)), closes [#950](https://github.com/jantimon/html-webpack-plugin/issues/950)
|
||||
* Use jsdoc for static typing ([a6b8d2d](https://github.com/jantimon/html-webpack-plugin/commit/a6b8d2dcf3b1183d50589b869162b972ad32de4d))
|
||||
* Use webpack 4 entries api to extract asset information ([342867e](https://github.com/jantimon/html-webpack-plugin/commit/342867e1edb7c2a8748b0aca396f160f0b13d42e))
|
||||
* **html-tags:** Add a helper to create html-tags ([ee6a165](https://github.com/jantimon/html-webpack-plugin/commit/ee6a165425a6b47dff341fb651848ec5727d7f7e))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **defaults:** Use src/index.ejs if no template option is set.
|
||||
* **defaults:** The default template has now a predefined viewport meta tag
|
||||
* **defaults:** The default meta utf-8 declaration was changed to <meta charset="utf-8"/>
|
||||
* **hooks:** Renamed beforeHtmlGeneration hook to beforeAssetTagGeneration
|
||||
* **hooks:** Renamed beforeHtmlProcessing hook to alterAssetTags
|
||||
* **hooks:** Renamed afterHtmlProcessing hook to beforeEmit
|
||||
* **hooks:** The html-webpack-plugin doesn't add its hooks to the compilation object anymore
|
||||
* The assets object which is used for the template parameters and inside hooks was changed. The chunks property was removed and the js and css property was converted from a string into an object `{ entryName: string, path: string}`
|
||||
* The mimetype information "text/javascript" is removed from all generated script
|
||||
tags
|
||||
* Remove selfClosingTag attribute
|
||||
* Template strings inside templates are now disabled by default
|
||||
* Dropped support for Webpack 1 - 3
|
||||
* Template variable webpack was removed
|
||||
* **chunksorter:** Chunks aren't sorted anymore by default
|
||||
|
||||
|
||||
<a name="3.2.0"></a>
|
||||
# [3.2.0](https://github.com/jantimon/html-webpack-plugin/compare/v3.1.0...v3.2.0) (2018-04-03)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **loader:** Allow to add new template parameters ([f7eac19](https://github.com/jantimon/html-webpack-plugin/commit/f7eac19)), closes [#915](https://github.com/jantimon/html-webpack-plugin/issues/915)
|
||||
* **loader:** Use lodash inside the loader directly ([7b4eb7f](https://github.com/jantimon/html-webpack-plugin/commit/7b4eb7f)), closes [#786](https://github.com/jantimon/html-webpack-plugin/issues/786)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Add meta tag option ([a7d37ca](https://github.com/jantimon/html-webpack-plugin/commit/a7d37ca))
|
||||
* Support node 6.9 ([74a22c4](https://github.com/jantimon/html-webpack-plugin/commit/74a22c4)), closes [#918](https://github.com/jantimon/html-webpack-plugin/issues/918)
|
||||
|
||||
|
||||
|
||||
<a name="3.1.0"></a>
|
||||
# [3.1.0](https://github.com/jantimon/html-webpack-plugin/compare/v3.0.8...v3.1.0) (2018-03-22)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Allow to overwrite the templateParameter [#830](https://github.com/jantimon/html-webpack-plugin/issues/830) ([c5e32d3](https://github.com/jantimon/html-webpack-plugin/commit/c5e32d3))
|
||||
|
||||
|
||||
|
||||
<a name="3.0.8"></a>
|
||||
## [3.0.8](https://github.com/jantimon/html-webpack-plugin/compare/v3.0.7...v3.0.8) (2018-03-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **compiler:** Fallback to 3.0.7 because of [#900](https://github.com/jantimon/html-webpack-plugin/issues/900) ([05ee29b](https://github.com/jantimon/html-webpack-plugin/commit/05ee29b))
|
||||
|
||||
|
||||
|
||||
<a name="3.0.7"></a>
|
||||
## [3.0.7](https://github.com/jantimon/html-webpack-plugin/compare/v3.0.6...v3.0.7) (2018-03-19)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **compiler:** Set single entry name [#895](https://github.com/jantimon/html-webpack-plugin/issues/895) ([26dcb98](https://github.com/jantimon/html-webpack-plugin/commit/26dcb98))
|
||||
|
||||
|
||||
|
||||
<a name="3.0.6"></a>
|
||||
## [3.0.6](https://github.com/jantimon/html-webpack-plugin/compare/v3.0.5...v3.0.6) (2018-03-06)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **hooks:** Call tapable.apply directly [#879](https://github.com/jantimon/html-webpack-plugin/issues/879) ([bcbb036](https://github.com/jantimon/html-webpack-plugin/commit/bcbb036))
|
||||
|
||||
|
||||
|
||||
<a name="3.0.5"></a>
|
||||
## [3.0.5](https://github.com/jantimon/html-webpack-plugin/compare/v3.0.2...v3.0.5) (2018-03-06)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **entries:** do not ignore JS if there is also CSS ([020b714](https://github.com/jantimon/html-webpack-plugin/commit/020b714))
|
||||
* **entries:** Don't add css entries twice ([0348d6b](https://github.com/jantimon/html-webpack-plugin/commit/0348d6b))
|
||||
* **hooks:** Remove deprecated tapable calls [#879](https://github.com/jantimon/html-webpack-plugin/issues/879) ([2288f20](https://github.com/jantimon/html-webpack-plugin/commit/2288f20))
|
||||
|
||||
|
||||
|
||||
<a name="3.0.4"></a>
|
||||
## [3.0.4](https://github.com/jantimon/html-webpack-plugin/compare/v3.0.2...v3.0.4) (2018-03-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **entries:** Don't add css entries twice ([e890f23](https://github.com/jantimon/html-webpack-plugin/commit/e890f23))
|
||||
|
||||
|
||||
|
||||
<a name="3.0.3"></a>
|
||||
## [3.0.3](https://github.com/jantimon/html-webpack-plugin/compare/v3.0.2...v3.0.3) (2018-03-01)
|
||||
|
||||
|
||||
### Refactor
|
||||
|
||||
* **performance:** Reduce the amount of chunk information gathered based on #825 ([06c59a7](https://github.com/jantimon/html-webpack-plugin/commit/06c59a7))
|
||||
|
||||
|
||||
<a name="3.0.2"></a>
|
||||
## [3.0.2](https://github.com/jantimon/html-webpack-plugin/compare/v3.0.1...v3.0.2) (2018-03-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **query-loader:** In case no query is provided, return an empty object. This fixes #727 ([7587754](https://github.com/jantimon/html-webpack-plugin/commit/7587754))
|
||||
|
||||
|
||||
|
||||
<a name="3.0.1"></a>
|
||||
## [3.0.1](https://github.com/jantimon/html-webpack-plugin/compare/v3.0.0...v3.0.1) (2018-03-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **package:** Remove the extract-text-webpack-plugin peer dependency ([57411a9](https://github.com/jantimon/html-webpack-plugin/commit/57411a9))
|
||||
|
||||
<a name="3.0.0"></a>
|
||||
## [3.0.0](https://github.com/jantimon/html-webpack-plugin/compare/v2.30.1...v3.0.0) (2018-28-02)
|
||||
|
||||
### Features
|
||||
|
||||
* Add support for the new [webpack tapable](https://github.com/webpack/tapable) to be compatible with webpack 4.x
|
||||
* Remove bluebird dependency
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* Similar to webpack 4.x the support for node versions older than 6 are no longer supported
|
||||
|
||||
<a name="2.30.1"></a>
|
||||
## 2.30.1
|
||||
|
||||
* Revert part the performance optimization ([#723](https://github.com/jantimon/html-webpack-plugin/pull/723)) because of [#753](https://github.com/jantimon/html-webpack-plugin/issues/753).
|
||||
|
||||
<a name="2.30.0"></a>
|
||||
## 2.30.0
|
||||
|
||||
* Add manual sort
|
||||
* Performance improvements ([#723](https://github.com/jantimon/html-webpack-plugin/pull/723))
|
||||
|
||||
<a name="2.29.0"></a>
|
||||
## 2.29.0
|
||||
|
||||
* Add support for Webpack 3
|
||||
|
||||
<a name="2.28.0"></a>
|
||||
## 2.28.0
|
||||
|
||||
* Backport 3.x void tag for plugin authors
|
||||
|
||||
<a name="2.27.1"></a>
|
||||
## 2.27.1
|
||||
|
||||
* Revert 2.25.0 loader resolving
|
||||
|
||||
<a name="2.27.0"></a>
|
||||
## 2.27.0
|
||||
|
||||
* Fix a chunksorter webpack 2 issue ([#569](https://github.com/jantimon/html-webpack-plugin/pull/569))
|
||||
* Fix template path resolving ([#542](https://github.com/jantimon/html-webpack-plugin/pull/542))
|
||||
|
||||
<a name="2.26.0"></a>
|
||||
## 2.26.0
|
||||
|
||||
* Allow plugins to add attributes without values to the `<script>` and `<link>` tags
|
||||
|
||||
<a name="2.25.0"></a>
|
||||
## 2.25.0
|
||||
|
||||
* Clearer loader output
|
||||
* Add basic support for webpack 2
|
||||
|
||||
<a name="2.24.1"></a>
|
||||
## 2.24.1
|
||||
|
||||
* Hide event deprecated warning of 'applyPluginsAsyncWaterfall' for html-webpack-plugin-after-emit and improve the warning message.
|
||||
|
||||
<a name="2.24.0"></a>
|
||||
## 2.24.0
|
||||
|
||||
* Update dependencies
|
||||
* Add deprecate warning for plugins not returning a result
|
||||
* Add [path] for favicons
|
||||
|
||||
<a name="2.23.0"></a>
|
||||
## 2.23.0
|
||||
|
||||
* Update dependencies
|
||||
* Stop automated tests for webpack 2 beta because of [#401](https://github.com/jantimon/html-webpack-plugin/issues/401)
|
||||
|
||||
<a name="2.22.0"></a>
|
||||
## 2.22.0
|
||||
|
||||
* Update dependencies
|
||||
|
||||
<a name="2.21.1"></a>
|
||||
## 2.21.1
|
||||
|
||||
* Better error handling ([#354](https://github.com/jantimon/html-webpack-plugin/pull/354))
|
||||
|
||||
<a name="2.21.0"></a>
|
||||
## 2.21.0
|
||||
|
||||
* Add `html-webpack-plugin-alter-asset-tags` event to allow plugins to adjust the script/link tags
|
||||
|
||||
<a name="2.20.0"></a>
|
||||
## 2.20.0
|
||||
|
||||
* Exclude chunks works now even if combined with dependency sort
|
||||
|
||||
<a name="2.19.0"></a>
|
||||
## 2.19.0
|
||||
|
||||
* Add `html-webpack-plugin-alter-chunks` event for custom chunk sorting and interpolation
|
||||
|
||||
<a name="2.18.0"></a>
|
||||
## 2.18.0
|
||||
|
||||
* Updated all dependencies
|
||||
|
||||
<a name="2.17.0"></a>
|
||||
## 2.17.0
|
||||
|
||||
* Add `type` attribute to `script` element to prevent issues in Safari 9.1.1
|
||||
|
||||
<a name="2.16.2"></a>
|
||||
## 2.16.2
|
||||
|
||||
* Fix bug introduced by 2.16.2. Fixes [#315](https://github.com/jantimon/html-webpack-plugin/issues/315)
|
||||
|
||||
<a name="2.16.1"></a>
|
||||
## 2.16.1
|
||||
|
||||
* Fix hot module replacement for webpack 2.x
|
||||
|
||||
<a name="2.16.0"></a>
|
||||
## 2.16.0
|
||||
|
||||
* Add support for dynamic filenames like index[hash].html
|
||||
|
||||
<a name="2.15.0"></a>
|
||||
## 2.15.0
|
||||
|
||||
* Add full unit test coverage for the webpack 2 beta version
|
||||
* For webpack 2 the default sort will be 'dependency' instead of 'id'
|
||||
* Upgrade dependencies
|
||||
|
||||
<a name="2.14.0"></a>
|
||||
## 2.14.0
|
||||
|
||||
* Export publicPath to the template
|
||||
* Add example for inlining css and js
|
||||
|
||||
<a name="2.13.0"></a>
|
||||
## 2.13.0
|
||||
|
||||
* Add support for absolute output file names
|
||||
* Add support for relative file names outside the output path
|
||||
|
||||
<a name="2.12.0"></a>
|
||||
## 2.12.0
|
||||
|
||||
* Basic Webpack 2.x support #225
|
||||
|
||||
<a name="2.11.0"></a>
|
||||
## 2.11.0
|
||||
|
||||
* Add `xhtml` option which is turned of by default. When activated it will inject self closed `<link href=".." />` tags instead of unclosed `<link href="..">` tags. ([#255](https://github.com/ampedandwired/html-webpack-plugin/pull/255))
|
||||
* Add support for webpack placeholders inside the public path e.g. `'/dist/[hash]/'`. ([#249](https://github.com/ampedandwired/html-webpack-plugin/pull/249))
|
||||
|
||||
<a name="2.10.0"></a>
|
||||
## 2.10.0
|
||||
|
||||
* Add `hash` field to the chunk object
|
||||
* Add `compilation` field to the templateParam object ([#237](https://github.com/ampedandwired/html-webpack-plugin/issues/237))
|
||||
* Add `html-webpack-plugin-before-html-generation` event
|
||||
* Improve error messages
|
||||
|
||||
<a name="2.9.0"></a>
|
||||
## 2.9.0
|
||||
|
||||
* Fix favicon path ([#185](https://github.com/ampedandwired/html-webpack-plugin/issues/185), [#208](https://github.com/ampedandwired/html-webpack-plugin/issues/208), [#215](https://github.com/ampedandwired/html-webpack-plugin/pull/215))
|
||||
|
||||
<a name="2.8.2"></a>
|
||||
## 2.8.2
|
||||
|
||||
* Support relative URLs on Windows ([#205](https://github.com/ampedandwired/html-webpack-plugin/issues/205))
|
||||
|
||||
<a name="2.8.1"></a>
|
||||
## 2.8.1
|
||||
|
||||
* Caching improvements ([#204](https://github.com/ampedandwired/html-webpack-plugin/issues/204))
|
||||
|
||||
<a name="2.8.0"></a>
|
||||
## 2.8.0
|
||||
|
||||
* Add `dependency` mode for `chunksSortMode` to sort chunks based on their dependencies with each other
|
||||
|
||||
<a name="2.7.2"></a>
|
||||
## 2.7.2
|
||||
|
||||
* Add support for require in js templates
|
||||
|
||||
<a name="2.7.1"></a>
|
||||
## 2.7.1
|
||||
|
||||
* Refactoring
|
||||
* Fix relative windows path
|
||||
|
||||
<a name="2.6.5"></a>
|
||||
## 2.6.5
|
||||
|
||||
* Minor refactoring
|
||||
|
||||
<a name="2.6.4"></a>
|
||||
## 2.6.4
|
||||
|
||||
* Fix for `"Uncaught TypeError: __webpack_require__(...) is not a function"`
|
||||
* Fix incomplete cache modules causing "HtmlWebpackPlugin Error: No source available"
|
||||
* Fix some issues on Windows
|
||||
|
||||
<a name="2.6.3"></a>
|
||||
## 2.6.3
|
||||
|
||||
* Prevent parsing the base template with the html-loader
|
||||
|
||||
<a name="2.6.2"></a>
|
||||
## 2.6.2
|
||||
|
||||
* Fix `lodash` resolve error ([#172](https://github.com/ampedandwired/html-webpack-plugin/issues/172))
|
||||
|
||||
<a name="2.6.1"></a>
|
||||
## 2.6.1
|
||||
|
||||
* Fix missing module ([#164](https://github.com/ampedandwired/html-webpack-plugin/issues/164))
|
||||
|
||||
<a name="2.6.0"></a>
|
||||
## 2.6.0
|
||||
|
||||
* Move compiler to its own file
|
||||
* Improve error messages
|
||||
* Fix global HTML_WEBPACK_PLUGIN variable
|
||||
|
||||
<a name="2.5.0"></a>
|
||||
## 2.5.0
|
||||
|
||||
* Support `lodash` template's HTML _"escape"_ delimiter (`<%- %>`)
|
||||
* Fix bluebird warning ([#130](https://github.com/ampedandwired/html-webpack-plugin/issues/130))
|
||||
* Fix an issue where incomplete cache modules were used
|
||||
|
||||
<a name="2.4.0"></a>
|
||||
## 2.4.0
|
||||
|
||||
* Don't recompile if the assets didn't change
|
||||
|
||||
<a name="2.3.0"></a>
|
||||
## 2.3.0
|
||||
|
||||
* Add events `html-webpack-plugin-before-html-processing`, `html-webpack-plugin-after-html-processing`, `html-webpack-plugin-after-emit` to allow other plugins to alter the html this plugin executes
|
||||
|
||||
<a name="2.2.0"></a>
|
||||
## 2.2.0
|
||||
|
||||
* Inject css and js even if the html file is incomplete ([#135](https://github.com/ampedandwired/html-webpack-plugin/issues/135))
|
||||
* Update dependencies
|
||||
|
||||
<a name="2.1.0"></a>
|
||||
## 2.1.0
|
||||
|
||||
* Synchronize with the stable `@1` version
|
||||
|
||||
<a name="2.0.4"></a>
|
||||
## 2.0.4
|
||||
|
||||
* Fix `minify` option
|
||||
* Fix missing hash interpolation in publicPath
|
||||
|
||||
<a name="2.0.3"></a>
|
||||
## 2.0.3
|
||||
|
||||
* Add support for webpack.BannerPlugin
|
||||
|
||||
<a name="2.0.2"></a>
|
||||
## 2.0.2
|
||||
|
||||
* Add support for loaders in templates ([#41](https://github.com/ampedandwired/html-webpack-plugin/pull/41))
|
||||
* Remove `templateContent` option from configuration
|
||||
* Better error messages
|
||||
* Update dependencies
|
||||
|
||||
|
||||
<a name="1.7.0"></a>
|
||||
## 1.7.0
|
||||
|
||||
* Add `chunksSortMode` option to configuration to control how chunks should be sorted before they are included to the html
|
||||
* Don't insert async chunks into html ([#95](https://github.com/ampedandwired/html-webpack-plugin/issues/95))
|
||||
* Update dependencies
|
||||
|
||||
<a name="1.6.2"></a>
|
||||
## 1.6.2
|
||||
|
||||
* Fix paths on Windows
|
||||
* Fix missing hash interpolation in publicPath
|
||||
* Allow only `false` or `object` in `minify` configuration option
|
||||
|
||||
<a name="1.6.1"></a>
|
||||
## 1.6.1
|
||||
|
||||
* Add `size` field to the chunk object
|
||||
* Fix stylesheet `<link>`s being discarded when used with `"inject: 'head'"`
|
||||
* Update dependencies
|
||||
|
||||
<a name="1.6.0"></a>
|
||||
## 1.6.0
|
||||
|
||||
* Support placing templates in subfolders
|
||||
* Don't include chunks with undefined name ([#60](https://github.com/ampedandwired/html-webpack-plugin/pull/60))
|
||||
* Don't include async chunks
|
||||
|
||||
<a name="1.5.2"></a>
|
||||
## 1.5.2
|
||||
|
||||
* Update dependencies (lodash)
|
||||
|
||||
<a name="1.5.1"></a>
|
||||
## 1.5.1
|
||||
|
||||
* Fix error when manifest is specified ([#56](https://github.com/ampedandwired/html-webpack-plugin/issues/56))
|
||||
|
||||
<a name="1.5.0"></a>
|
||||
## 1.5.0
|
||||
|
||||
* Allow to inject javascript files into the head of the html page
|
||||
* Fix error reporting
|
||||
|
||||
<a name="1.4.0"></a>
|
||||
## 1.4.0
|
||||
|
||||
* Add `favicon.ico` option
|
||||
* Add html minifcation
|
||||
|
||||
<a name="1.2.0"></a>
|
||||
## 1.2.0
|
||||
|
||||
* Set charset using HTML5 meta attribute
|
||||
* Reload upon change when using webpack watch mode
|
||||
* Generate manifest attribute when using
|
||||
[appcache-webpack-plugin](https://github.com/lettertwo/appcache-webpack-plugin)
|
||||
* Optionally add webpack hash as a query string to resources included in the HTML
|
||||
(`hash: true`) for cache busting
|
||||
* CSS files generated using webpack (for example, by using the
|
||||
[extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin))
|
||||
are now automatically included into the generated HTML
|
||||
* More detailed information about the files generated by webpack is now available
|
||||
to templates in the `o.htmlWebpackPlugin.files` attribute. See readme for more
|
||||
details. This new attribute deprecates the old `o.htmlWebpackPlugin.assets` attribute.
|
||||
* The `templateContent` option can now be a function that returns the template string to use
|
||||
* Expose webpack configuration to templates (`o.webpackConfig`)
|
||||
* Sort chunks to honour dependencies between them (useful for use with CommonsChunkPlugin).
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
Copyright JS Foundation and other contributors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
'Software'), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
||||
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
||||
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||||
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
+623
@@ -0,0 +1,623 @@
|
||||
[![npm][npm]][npm-url]
|
||||
[![node][node]][node-url]
|
||||
|
||||
[![deps][deps]][deps-url]
|
||||
[![tests][tests]][tests-url]
|
||||
[](#backers)
|
||||
[](#sponsors)
|
||||
|
||||
<div align="center">
|
||||
<img width="200" height="200" src="https://worldvectorlogo.com/logos/html5.svg">
|
||||
<a href="https://github.com/webpack/webpack">
|
||||
<img width="200" height="200"
|
||||
src="https://webpack.js.org/assets/icon-square-big.svg">
|
||||
</a>
|
||||
<div>
|
||||
<img width="100" height="100" title="Webpack Plugin" src="http://michael-ciniawsky.github.io/postcss-load-plugins/logo.svg">
|
||||
</div>
|
||||
<h1>HTML Webpack Plugin</h1>
|
||||
<p>Plugin that simplifies creation of HTML files to serve your bundles</p>
|
||||
</div>
|
||||
|
||||
<h2 align="center">Install</h2>
|
||||
|
||||
```bash
|
||||
npm i --save-dev html-webpack-plugin
|
||||
```
|
||||
|
||||
```bash
|
||||
yarn add --dev html-webpack-plugin
|
||||
```
|
||||
|
||||
|
||||
This is a [webpack](http://webpack.js.org/) plugin that simplifies creation of HTML files to serve your `webpack` bundles. This is especially useful for `webpack` bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply
|
||||
your own template using `lodash` templates or use your own loader.
|
||||
|
||||
<h2 align="center">Sponsors</h2>
|
||||
|
||||
<a href="https://opencollective.com/html-webpack-plugin/sponsor/0/website" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/sponsor/0/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/html-webpack-plugin/sponsor/1/website" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/sponsor/1/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/html-webpack-plugin/sponsor/2/website" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/sponsor/2/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/html-webpack-plugin/sponsor/3/website" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/sponsor/3/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/html-webpack-plugin/sponsor/4/website" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/sponsor/4/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/html-webpack-plugin/sponsor/5/website" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/sponsor/5/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/html-webpack-plugin/sponsor/6/website" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/sponsor/6/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/html-webpack-plugin/sponsor/7/website" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/sponsor/7/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/html-webpack-plugin/sponsor/8/website" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/sponsor/8/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/html-webpack-plugin/sponsor/9/website" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/sponsor/9/avatar.svg"></a>
|
||||
|
||||
Thanks for supporting the ongoing improvements to the html-webpack-plugin!
|
||||
|
||||
<h2 align="center">Zero Config</h2>
|
||||
|
||||
The `html-webpack-plugin` works without configuration.
|
||||
It's a great addition to the [⚙️ webpack-config-plugins](https://github.com/namics/webpack-config-plugins/blob/master/README.md#zero-config-webpack-dev-server-example).
|
||||
|
||||
<h2 align="center">Plugins</h2>
|
||||
|
||||
The `html-webpack-plugin` provides [hooks](https://github.com/jantimon/html-webpack-plugin#events) to extend it to your needs. There are already some really powerful plugins which can be integrated with zero configuration
|
||||
|
||||
* [webpack-subresource-integrity](https://www.npmjs.com/package/webpack-subresource-integrity) for enhanced asset security
|
||||
* [appcache-webpack-plugin](https://github.com/lettertwo/appcache-webpack-plugin) for iOS and Android offline usage
|
||||
* [favicons-webpack-plugin](https://github.com/jantimon/favicons-webpack-plugin) which generates favicons and icons for iOS, Android and desktop browsers
|
||||
* [html-webpack-harddisk-plugin](https://github.com/jantimon/html-webpack-harddisk-plugin) can be used to always write to disk the html file, useful when webpack-dev-server / HMR are being used
|
||||
* [html-webpack-inline-source-plugin](https://github.com/DustinJackson/html-webpack-inline-source-plugin) to inline your assets in the resulting HTML file
|
||||
* [html-webpack-inline-svg-plugin](https://github.com/thegc/html-webpack-inline-svg-plugin) to inline SVGs in the resulting HTML file.
|
||||
* [html-webpack-exclude-assets-plugin](https://github.com/jamesjieye/html-webpack-exclude-assets-plugin) for excluding assets using regular expressions
|
||||
* [html-webpack-include-assets-plugin](https://github.com/jharris4/html-webpack-include-assets-plugin) for including lists of js or css file paths (such as those copied by the copy-webpack-plugin).
|
||||
* [script-ext-html-webpack-plugin](https://github.com/numical/script-ext-html-webpack-plugin) to add `async`, `defer` or `module` attributes to your `<script>` elements, or even inline them
|
||||
* [style-ext-html-webpack-plugin](https://github.com/numical/style-ext-html-webpack-plugin) to convert your `<link>`s to external stylesheets into `<style>` elements containing internal CSS
|
||||
* [html-webpack-injector](https://github.com/thearchitgarg/html-webpack-injector) to inject chunks in `head` or `body` (different locations ) of same html document.
|
||||
* [resource-hints-webpack-plugin](https://github.com/jantimon/resource-hints-webpack-plugin) to add resource hints for faster initial page loads using `<link rel='preload'>` and `<link rel='prefetch'>`
|
||||
* [preload-webpack-plugin](https://github.com/GoogleChrome/preload-webpack-plugin) for automatically wiring up asynchronous (and other types) of JavaScript chunks using `<link rel='preload'>` helping with lazy-loading
|
||||
* [link-media-html-webpack-plugin](https://github.com/yaycmyk/link-media-html-webpack-plugin) allows for injected stylesheet `<link />` tags to have their media attribute set automatically; useful for providing specific desktop/mobile/print etc. stylesheets that the browser will conditionally download
|
||||
* [inline-chunk-manifest-html-webpack-plugin](https://github.com/jouni-kantola/inline-chunk-manifest-html-webpack-plugin) for inlining webpack's chunk manifest. Default extracts manifest and inlines in `<head>`
|
||||
* [html-webpack-inline-style-plugin](https://github.com/djaax/html-webpack-inline-style-plugin) for inlining styles to HTML elements using [juice](https://github.com/Automattic/juice). Useful for email generation automatisation.
|
||||
* [html-webpack-exclude-empty-assets-plugin](https://github.com/KnisterPeter/html-webpack-exclude-empty-assets-plugin) removes empty assets from being added to the html. This fixes some problems with extract-text-plugin with webpack 4.
|
||||
* [webpack-concat-plugin](https://github.com/hxlniada/webpack-concat-plugin) for concat and uglify files that needn't to be webpack bundles(for legacy files) and inject to html-webpack-plugin.
|
||||
* [html-webpack-link-type-plugin](https://github.com/steadyapp/html-webpack-link-type-plugin) adds a configurable mimetype to resources injected as links (such as adding type="text/css" to external stylesheets) for compatibility with "strict mode".
|
||||
* [csp-html-webpack-plugin](https://github.com/slackhq/csp-html-webpack-plugin) to add [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) meta tags to the HTML output
|
||||
* [webpack-nomodule-plugin](https://github.com/swimmadude66/webpack-nomodule-plugin) allows you to add a `nomodule` attribute to specific injected scripts, which prevents the scripts from being loaded by newer browsers. Good for limiting loads of polyfills.
|
||||
|
||||
|
||||
<h2 align="center">Usage</h2>
|
||||
|
||||
The plugin will generate an HTML5 file for you that includes all your `webpack`
|
||||
bundles in the body using `script` tags. Just add the plugin to your `webpack`
|
||||
config as follows:
|
||||
|
||||
**webpack.config.js**
|
||||
```js
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
|
||||
module.exports = {
|
||||
entry: 'index.js',
|
||||
output: {
|
||||
path: __dirname + '/dist',
|
||||
filename: 'index_bundle.js'
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin()
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
This will generate a file `dist/index.html` containing the following
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Webpack App</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="index_bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
If you have multiple `webpack` entry points, they will all be included with `script` tags in the generated HTML.
|
||||
|
||||
If you have any CSS assets in webpack's output (for example, CSS extracted with the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin))
|
||||
then these will be included with `<link>` tags in the HTML head.
|
||||
|
||||
If you have plugins that make use of it, `html-webpack-plugin` should be ordered first before any of the integrated plugins.
|
||||
|
||||
<h2 align="center">Options</h2>
|
||||
|
||||
You can pass a hash of configuration options to `html-webpack-plugin`.
|
||||
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`)|
|
||||
|**`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|
|
||||
|**`templateParameters`**|`{Boolean\|Object\|Function}`|``| Allows to overwrite the parameters used in the template - see [example](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/template-parameters) |
|
||||
|**`inject`**|`{Boolean\|String}`|`true`|`true \|\| 'head' \|\| 'body' \|\| false` Inject all assets into the given `template` or `templateContent`. When passing `true` or `'body'` all javascript resources will be placed at the bottom of the body element. `'head'` will place the scripts in the head element - see the [inject:false example](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/custom-insertion-position)|
|
||||
|**`scriptLoading`**|`{'blocking'\|'defer'}`|`'blocking'`| Modern browsers support non blocking javascript loading (`'defer'`) to improve the page startup performance. |
|
||||
|**`favicon`**|`{String}`|``|Adds the given favicon path to the output HTML|
|
||||
|**`meta`**|`{Object}`|`{}`|Allows to inject `meta`-tags. E.g. `meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}`|
|
||||
|**`base`**|`{Object\|String\|false}`|`false`|Inject a [`base`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) tag. E.g. `base: "https://example.com/path/page.html`|
|
||||
|**`minify`**|`{Boolean\|Object}`|`true` if `mode` is `'production'`, otherwise `false`|Controls if and in what ways the output should be minified. See [minification](#minification) below for more details.|
|
||||
|**`hash`**|`{Boolean}`|`false`|If `true` then append a unique `webpack` compilation hash to all included scripts and CSS files. This is useful for cache busting|
|
||||
|**`cache`**|`{Boolean}`|`true`|Emit the file only if it was changed|
|
||||
|**`showErrors`**|`{Boolean}`|`true`|Errors details will be written into the HTML page|
|
||||
|**`chunks`**|`{?}`|`?`|Allows you to add only some chunks (e.g only the unit-test chunk)|
|
||||
|**[`chunksSortMode`](#plugins)**|`{String\|Function}`|`auto`|Allows to control how chunks should be sorted before they are included to the HTML. Allowed values are `'none' \| 'auto' \| 'dependency' \| 'manual' \| {Function}`|
|
||||
|**`excludeChunks`**|`{Array.<string>}`|``|Allows you to skip some chunks (e.g don't add the unit-test chunk)|
|
||||
|**`xhtml`**|`{Boolean}`|`false`|If `true` render the `link` tags as self-closing (XHTML compliant)|
|
||||
|
||||
Here's an example webpack config illustrating how to use these options
|
||||
|
||||
**webpack.config.js**
|
||||
```js
|
||||
{
|
||||
entry: 'index.js',
|
||||
output: {
|
||||
path: __dirname + '/dist',
|
||||
filename: 'index_bundle.js'
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
title: 'My App',
|
||||
filename: 'assets/admin.html'
|
||||
})
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Generating Multiple HTML Files
|
||||
|
||||
To generate more than one HTML file, declare the plugin more than
|
||||
once in your plugins array
|
||||
|
||||
**webpack.config.js**
|
||||
```js
|
||||
{
|
||||
entry: 'index.js',
|
||||
output: {
|
||||
path: __dirname + '/dist',
|
||||
filename: 'index_bundle.js'
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin(), // Generates default index.html
|
||||
new HtmlWebpackPlugin({ // Also generate a test.html
|
||||
filename: 'test.html',
|
||||
template: 'src/assets/test.html'
|
||||
})
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Writing Your Own Templates
|
||||
|
||||
If the default generated HTML doesn't meet your needs you can supply
|
||||
your own template. The easiest way is to use the `template` option and pass a custom HTML file.
|
||||
The html-webpack-plugin will automatically inject all necessary CSS, JS, manifest
|
||||
and favicon files into the markup.
|
||||
|
||||
Details of other template loaders are [documented here](https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md).
|
||||
|
||||
```js
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
title: 'Custom template',
|
||||
// Load a custom template (lodash by default)
|
||||
template: 'index.html'
|
||||
})
|
||||
]
|
||||
```
|
||||
|
||||
**index.html**
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
If you already have a template loader, you can use it to parse the template.
|
||||
Please note that this will also happen if you specify the html-loader and use `.html` file as template.
|
||||
|
||||
**webpack.config.js**
|
||||
```js
|
||||
module: {
|
||||
loaders: [
|
||||
{ test: /\.hbs$/, loader: "handlebars-loader" }
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
title: 'Custom template using Handlebars',
|
||||
template: 'index.hbs'
|
||||
})
|
||||
]
|
||||
```
|
||||
|
||||
You can use the `lodash` syntax out of the box. If the `inject` feature doesn't fit your needs and you want full control over the asset placement use the [default template](https://github.com/jaketrent/html-webpack-template/blob/86f285d5c790a6c15263f5cc50fd666d51f974fd/index.html) of the [html-webpack-template project](https://github.com/jaketrent/html-webpack-template) as a starting point for writing your own.
|
||||
|
||||
The following variables are available in the template:
|
||||
- `htmlWebpackPlugin`: data specific to this plugin
|
||||
- `htmlWebpackPlugin.files`: a massaged representation of the
|
||||
`assetsByChunkName` attribute of webpack's [stats](https://github.com/webpack/docs/wiki/node.js-api#stats)
|
||||
object. It contains a mapping from entry point name to the bundle filename, eg:
|
||||
```json
|
||||
"htmlWebpackPlugin": {
|
||||
"files": {
|
||||
"css": [ "main.css" ],
|
||||
"js": [ "assets/head_bundle.js", "assets/main_bundle.js"],
|
||||
"chunks": {
|
||||
"head": {
|
||||
"entry": "assets/head_bundle.js",
|
||||
"css": [ "main.css" ]
|
||||
},
|
||||
"main": {
|
||||
"entry": "assets/main_bundle.js",
|
||||
"css": []
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
If you've set a publicPath in your webpack config this will be reflected
|
||||
correctly in this assets hash.
|
||||
|
||||
- `htmlWebpackPlugin.options`: the options hash that was passed to
|
||||
the plugin. In addition to the options actually used by this plugin,
|
||||
you can use this hash to pass arbitrary data through to your template.
|
||||
|
||||
- `webpack`: the webpack [stats](https://github.com/webpack/docs/wiki/node.js-api#stats)
|
||||
object. Note that this is the stats object as it was at the time the HTML template
|
||||
was emitted and as such may not have the full set of stats that are available
|
||||
after the webpack run is complete.
|
||||
|
||||
- `webpackConfig`: the webpack configuration that was used for this compilation. This
|
||||
can be used, for example, to get the `publicPath` (`webpackConfig.output.publicPath`).
|
||||
|
||||
- `compilation`: the webpack [compilation object](https://webpack.js.org/api/compilation-object/).
|
||||
This can be used, for example, to get the contents of processed assets and inline them
|
||||
directly in the page, through `compilation.assets[...].source()`
|
||||
(see [the inline template example](examples/inline/template.pug)).
|
||||
|
||||
|
||||
### Filtering Chunks
|
||||
|
||||
To include only certain chunks you can limit the chunks being used
|
||||
|
||||
**webpack.config.js**
|
||||
```js
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
chunks: ['app']
|
||||
})
|
||||
]
|
||||
```
|
||||
|
||||
It is also possible to exclude certain chunks by setting the `excludeChunks` option
|
||||
|
||||
**webpack.config.js**
|
||||
```js
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
excludeChunks: [ 'dev-helper' ]
|
||||
})
|
||||
]
|
||||
```
|
||||
|
||||
### Minification
|
||||
|
||||
If the `minify` option is set to `true` (the default when webpack's `mode` is `'production'`),
|
||||
the generated HTML will be minified using [html-minifier-terser](https://github.com/DanielRuf/html-minifier-terser)
|
||||
and the following options:
|
||||
|
||||
```js
|
||||
{
|
||||
collapseWhitespace: true,
|
||||
removeComments: true,
|
||||
removeRedundantAttributes: true,
|
||||
removeScriptTypeAttributes: true,
|
||||
removeStyleLinkTypeAttributes: true,
|
||||
useShortDoctype: true
|
||||
}
|
||||
```
|
||||
|
||||
To use custom [html-minifier options](https://github.com/DanielRuf/html-minifier-terser#options-quick-reference)
|
||||
pass an object to `minify` instead. This object will not be merged with the defaults above.
|
||||
|
||||
To disable minification during production mode set the `minify` option to `false`.
|
||||
|
||||
### Meta Tags
|
||||
|
||||
If the `meta` option is set the html-webpack-plugin will inject meta tags.
|
||||
For the default template the html-webpack-plugin will already provide a default for the `viewport` meta tag.
|
||||
|
||||
Please take a look at this well maintained list of almost all [possible meta tags](https://github.com/joshbuchea/HEAD#meta).
|
||||
|
||||
#### name/content meta tags
|
||||
|
||||
Most meta tags are configured by setting a `name` and a `content` attribute.
|
||||
To add those use a key/value pair:
|
||||
|
||||
**webpack.config.js**
|
||||
```js
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
'meta': {
|
||||
'viewport': 'width=device-width, initial-scale=1, shrink-to-fit=no',
|
||||
// Will generate: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
'theme-color': '#4285f4'
|
||||
// Will generate: <meta name="theme-color" content="#4285f4">
|
||||
}
|
||||
})
|
||||
]
|
||||
```
|
||||
|
||||
#### Simulate http response headers
|
||||
|
||||
The **http-equiv** attribute is essentially used to simulate a HTTP response header.
|
||||
This format is supported using an object notation which allows you to add any attribute:
|
||||
|
||||
**webpack.config.js**
|
||||
```js
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
'meta': {
|
||||
'Content-Security-Policy': { 'http-equiv': 'Content-Security-Policy', 'content': 'default-src https:' },
|
||||
// Will generate: <meta http-equiv="Content-Security-Policy" content="default-src https:">
|
||||
// Which equals to the following http header: `Content-Security-Policy: default-src https:`
|
||||
'set-cookie': { 'http-equiv': 'set-cookie', content: 'name=value; expires=date; path=url' },
|
||||
// Will generate: <meta http-equiv="set-cookie" content="value; expires=date; path=url">
|
||||
// Which equals to the following http header: `set-cookie: value; expires=date; path=url`
|
||||
}
|
||||
})
|
||||
]
|
||||
```
|
||||
|
||||
### Base Tag
|
||||
|
||||
When the `base` option is used,
|
||||
html-webpack-plugin will inject a [base tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base).
|
||||
By default, a base tag will not be injected.
|
||||
|
||||
The following two are identical and will both insert `<base href="http://example.com/some/page.html">`:
|
||||
|
||||
```js
|
||||
new HtmlWebpackPlugin({
|
||||
'base': 'http://example.com/some/page.html'
|
||||
})
|
||||
```
|
||||
|
||||
```js
|
||||
new HtmlWebpackPlugin({
|
||||
'base': { 'href': 'http://example.com/some/page.html' }
|
||||
})
|
||||
```
|
||||
|
||||
The `target` can be specified with the corresponding key:
|
||||
|
||||
```js
|
||||
new HtmlWebpackPlugin({
|
||||
'base': {
|
||||
'href': 'http://example.com/some/page.html',
|
||||
'target': '_blank'
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
which will inject the element `<base href="http://example.com/some/page.html" target="_blank">`.
|
||||
|
||||
### Long Term Caching
|
||||
|
||||
For long term caching add `contenthash/templatehash` to the filename.
|
||||
|
||||
**Example:**
|
||||
|
||||
```js
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
filename: 'index.[contenthash].html'
|
||||
})
|
||||
]
|
||||
```
|
||||
|
||||
`contenthash/templatehash` is the hash of the content of the output file.
|
||||
|
||||
Optionally, You can configure like `[<hashType>:contenthash:<digestType>:<length>]`
|
||||
|
||||
* `hashType` - one of `sha1`, `md5`, `sha256`, `sha512` or any other node.js supported hash type
|
||||
* `digestType` - one of `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
|
||||
* `maxlength` - maximum length of the generated hash in chars
|
||||
|
||||
**Defaults:** `[md5:contenthash:hex:9999]`
|
||||
|
||||
### Events
|
||||
|
||||
To allow other [plugins](https://github.com/webpack/docs/wiki/plugins) to alter the HTML this plugin executes
|
||||
[tapable](https://github.com/webpack/tapable/tree/master) hooks.
|
||||
|
||||
The [lib/hooks.js](https://github.com/jantimon/html-webpack-plugin/blob/master/lib/hooks.js) contains all information
|
||||
about which values are passed.
|
||||
|
||||
[](https://github.com/jantimon/html-webpack-plugin/blob/master/flow.puml)
|
||||
|
||||
#### `beforeAssetTagGeneration` hook
|
||||
|
||||
```
|
||||
AsyncSeriesWaterfallHook<{
|
||||
assets: {
|
||||
publicPath: string,
|
||||
js: Array<{string}>,
|
||||
css: Array<{string}>,
|
||||
favicon?: string | undefined,
|
||||
manifest?: string | undefined
|
||||
},
|
||||
outputName: string,
|
||||
plugin: HtmlWebpackPlugin
|
||||
}>
|
||||
```
|
||||
|
||||
#### `alterAssetTags` hook
|
||||
|
||||
```
|
||||
AsyncSeriesWaterfallHook<{
|
||||
assetTags: {
|
||||
scripts: Array<HtmlTagObject>,
|
||||
styles: Array<HtmlTagObject>,
|
||||
meta: Array<HtmlTagObject>,
|
||||
},
|
||||
outputName: string,
|
||||
plugin: HtmlWebpackPlugin
|
||||
}>
|
||||
```
|
||||
|
||||
#### `alterAssetTagGroups` hook
|
||||
|
||||
```
|
||||
AsyncSeriesWaterfallHook<{
|
||||
headTags: Array<HtmlTagObject | HtmlTagObject>,
|
||||
bodyTags: Array<HtmlTagObject | HtmlTagObject>,
|
||||
outputName: string,
|
||||
plugin: HtmlWebpackPlugin
|
||||
}>
|
||||
```
|
||||
|
||||
#### `afterTemplateExecution` hook
|
||||
|
||||
```
|
||||
AsyncSeriesWaterfallHook<{
|
||||
html: string,
|
||||
headTags: Array<HtmlTagObject | HtmlTagObject>,
|
||||
bodyTags: Array<HtmlTagObject | HtmlTagObject>,
|
||||
outputName: string,
|
||||
plugin: HtmlWebpackPlugin,
|
||||
}>
|
||||
```
|
||||
|
||||
#### `beforeEmit` hook
|
||||
|
||||
```
|
||||
AsyncSeriesWaterfallHook<{
|
||||
html: string,
|
||||
outputName: string,
|
||||
plugin: HtmlWebpackPlugin,
|
||||
}>
|
||||
```
|
||||
|
||||
#### `afterEmit` hook
|
||||
|
||||
```
|
||||
AsyncSeriesWaterfallHook<{
|
||||
outputName: string,
|
||||
plugin: HtmlWebpackPlugin
|
||||
}>
|
||||
```
|
||||
|
||||
Example implementation: [webpack-subresource-integrity](https://www.npmjs.com/package/webpack-subresource-integrity)
|
||||
|
||||
**plugin.js**
|
||||
```js
|
||||
// If your plugin is direct dependent to the html webpack plugin:
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
// If your plugin is using html-webpack-plugin as an optional dependency
|
||||
// you can use https://github.com/tallesl/node-safe-require instead:
|
||||
const HtmlWebpackPlugin = require('safe-require')('html-webpack-plugin');
|
||||
|
||||
class MyPlugin {
|
||||
apply (compiler) {
|
||||
compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
|
||||
console.log('The compiler is starting a new compilation...')
|
||||
|
||||
// Static Plugin interface |compilation |HOOK NAME | register listener
|
||||
HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
|
||||
'MyPlugin', // <-- Set a meaningful name here for stacktraces
|
||||
(data, cb) => {
|
||||
// Manipulate the content
|
||||
data.html += 'The Magic Footer'
|
||||
// Tell webpack to move on
|
||||
cb(null, data)
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = MyPlugin
|
||||
```
|
||||
|
||||
**webpack.config.js**
|
||||
```js
|
||||
plugins: [
|
||||
new MyPlugin({ options: '' })
|
||||
]
|
||||
```
|
||||
|
||||
Note that the callback must be passed the HtmlWebpackPluginData in order to pass this onto any other plugins listening on the same `beforeEmit` event
|
||||
|
||||
<h2 align="center">Maintainers</h2>
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<img width="150" height="150"
|
||||
src="https://avatars3.githubusercontent.com/u/4113649?v=3&s=150">
|
||||
</br>
|
||||
<a href="https://github.com/jantimon">Jan Nicklas</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<img width="150" height="150"
|
||||
src="https://avatars2.githubusercontent.com/u/4112409?v=3&s=150">
|
||||
</br>
|
||||
<a href="https://github.com/mastilver">Thomas Sileghem</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tbody>
|
||||
</table>
|
||||
|
||||
|
||||
## Backers
|
||||
|
||||
Thank you to all our backers!
|
||||
If you want to support the project as well [become a sponsor](https://opencollective.com/html-webpack-plugin#sponsor) or a [a backer](https://opencollective.com/html-webpack-plugin#backer).
|
||||
|
||||
<a href="https://opencollective.com/html-webpack-plugin/backer/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/0/avatar.svg?requireActive=false"></a>
|
||||
<a href="https://opencollective.com/html-webpack-plugin/backer/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/1/avatar.svg?requireActive=false"></a>
|
||||
<a href="https://opencollective.com/html-webpack-plugin/backer/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/2/avatar.svg?requireActive=false"></a>
|
||||
<a href="https://opencollective.com/html-webpack-plugin/backer/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/3/avatar.svg?requireActive=false"></a>
|
||||
<a href="https://opencollective.com/html-webpack-plugin/backer/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/4/avatar.svg?requireActive=false"></a>
|
||||
<a href="https://opencollective.com/html-webpack-plugin/backer/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/5/avatar.svg?requireActive=false"></a>
|
||||
<a href="https://opencollective.com/html-webpack-plugin/backer/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/6/avatar.svg?requireActive=false"></a>
|
||||
<a href="https://opencollective.com/html-webpack-plugin/backer/7/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/7/avatar.svg?requireActive=false"></a>
|
||||
<a href="https://opencollective.com/html-webpack-plugin/backer/8/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/8/avatar.svg?requireActive=false"></a>
|
||||
<a href="https://opencollective.com/html-webpack-plugin/backer/9/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/9/avatar.svg?requireActive=false"></a>
|
||||
|
||||
|
||||
## Contributors
|
||||
|
||||
This project exists thanks to all the people who contribute.
|
||||
|
||||
You're free to contribute to this project by submitting [issues](https://github.com/jantimon/html-webpack-plugin/issues) and/or [pull requests](https://github.com/jantimon/html-webpack-plugin/pulls). This project is test-driven, so keep in mind that every change and new feature should be covered by tests.
|
||||
|
||||
This project uses the [semistandard code style](https://github.com/Flet/semistandard).
|
||||
|
||||
<a href="https://github.com/jantimon/html-webpack-plugin/graphs/contributors"><img src="https://opencollective.com/html-webpack-plugin/contributors.svg?width=890&button=false" /></a>
|
||||
|
||||
|
||||
[npm]: https://img.shields.io/npm/v/html-webpack-plugin.svg
|
||||
[npm-url]: https://npmjs.com/package/html-webpack-plugin
|
||||
|
||||
[node]: https://img.shields.io/node/v/html-webpack-plugin.svg
|
||||
[node-url]: https://nodejs.org
|
||||
|
||||
[deps]: https://david-dm.org/jantimon/html-webpack-plugin.svg
|
||||
[deps-url]: https://david-dm.org/jantimon/html-webpack-plugin
|
||||
|
||||
[tests]: http://img.shields.io/travis/jantimon/html-webpack-plugin.svg
|
||||
[tests-url]: https://travis-ci.org/jantimon/html-webpack-plugin
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
+1086
File diff suppressed because it is too large
Load Diff
+40
@@ -0,0 +1,40 @@
|
||||
// @ts-check
|
||||
/** @typedef {import("webpack/lib/Compilation.js")} WebpackCompilation */
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @type {{[sortmode: string] : (entryPointNames: Array<string>, compilation, htmlWebpackPluginOptions) => Array<string> }}
|
||||
* This file contains different sort methods for the entry chunks names
|
||||
*/
|
||||
module.exports = {};
|
||||
|
||||
/**
|
||||
* Performs identity mapping (no-sort).
|
||||
* @param {Array} chunks the chunks to sort
|
||||
* @return {Array} The sorted chunks
|
||||
*/
|
||||
module.exports.none = chunks => chunks;
|
||||
|
||||
/**
|
||||
* Sort manually by the chunks
|
||||
* @param {string[]} entryPointNames the chunks to sort
|
||||
* @param {WebpackCompilation} compilation the webpack compilation
|
||||
* @param htmlWebpackPluginOptions the plugin options
|
||||
* @return {string[]} The sorted chunks
|
||||
*/
|
||||
module.exports.manual = (entryPointNames, compilation, htmlWebpackPluginOptions) => {
|
||||
const chunks = htmlWebpackPluginOptions.chunks;
|
||||
if (!Array.isArray(chunks)) {
|
||||
return entryPointNames;
|
||||
}
|
||||
// Remove none existing entries from
|
||||
// htmlWebpackPluginOptions.chunks
|
||||
return chunks.filter((entryPointName) => {
|
||||
return compilation.entrypoints.has(entryPointName);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Defines the default sorter.
|
||||
*/
|
||||
module.exports.auto = module.exports.none;
|
||||
+356
@@ -0,0 +1,356 @@
|
||||
// @ts-check
|
||||
/** @typedef {import("webpack/lib/Compilation.js")} WebpackCompilation */
|
||||
/** @typedef {import("webpack/lib/Compiler.js")} WebpackCompiler */
|
||||
/** @typedef {import("webpack/lib/Chunk.js")} WebpackChunk */
|
||||
'use strict';
|
||||
/**
|
||||
* @file
|
||||
* This file uses webpack to compile a template with a child compiler.
|
||||
*
|
||||
* [TEMPLATE] -> [JAVASCRIPT]
|
||||
*
|
||||
*/
|
||||
'use strict';
|
||||
const NodeTemplatePlugin = require('webpack/lib/node/NodeTemplatePlugin');
|
||||
const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin');
|
||||
const LoaderTargetPlugin = require('webpack/lib/LoaderTargetPlugin');
|
||||
const LibraryTemplatePlugin = require('webpack/lib/LibraryTemplatePlugin');
|
||||
const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
|
||||
|
||||
/**
|
||||
* The HtmlWebpackChildCompiler is a helper to allow resusing one childCompiler
|
||||
* for multile HtmlWebpackPlugin instances to improve the compilation performance.
|
||||
*/
|
||||
class HtmlWebpackChildCompiler {
|
||||
constructor () {
|
||||
/**
|
||||
* @type {string[]} templateIds
|
||||
* The template array will allow us to keep track which input generated which output
|
||||
*/
|
||||
this.templates = [];
|
||||
/**
|
||||
* @type {Promise<{[templatePath: string]: { content: string, hash: string, entry: WebpackChunk }}>}
|
||||
*/
|
||||
this.compilationPromise; // eslint-disable-line
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
this.compilationStartedTimestamp; // eslint-disable-line
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
this.compilationEndedTimestamp; // eslint-disable-line
|
||||
/**
|
||||
* All file dependencies of the child compiler
|
||||
* @type {string[]}
|
||||
*/
|
||||
this.fileDependencies = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a templatePath to the child compiler
|
||||
* The given template will be compiled by `compileTemplates`
|
||||
* @param {string} template - The webpack path to the template e.g. `'!!html-loader!index.html'`
|
||||
* @returns {boolean} true if the template is new
|
||||
*/
|
||||
addTemplate (template) {
|
||||
const templateId = this.templates.indexOf(template);
|
||||
// Don't add the template to the compiler if a similar template was already added
|
||||
if (templateId !== -1) {
|
||||
return false;
|
||||
}
|
||||
// A child compiler can compile only once
|
||||
// throw an error if a new template is added after the compilation started
|
||||
if (this.isCompiling()) {
|
||||
throw new Error('New templates can only be added before `compileTemplates` was called.');
|
||||
}
|
||||
// Add the template to the childCompiler
|
||||
this.templates.push(template);
|
||||
// Mark the cache invalid
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if the childCompiler is currently compiling
|
||||
* @retuns {boolean}
|
||||
*/
|
||||
isCompiling () {
|
||||
return !this.didCompile() && this.compilationStartedTimestamp !== undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if the childCOmpiler is done compiling
|
||||
*/
|
||||
didCompile () {
|
||||
return this.compilationEndedTimestamp !== undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* This function will start the template compilation
|
||||
* once it is started no more templates can be added
|
||||
*
|
||||
* @param {WebpackCompilation} mainCompilation
|
||||
* @returns {Promise<{[templatePath: string]: { content: string, hash: string, entry: WebpackChunk }}>}
|
||||
*/
|
||||
compileTemplates (mainCompilation) {
|
||||
// To prevent multiple compilations for the same template
|
||||
// the compilation is cached in a promise.
|
||||
// If it already exists return
|
||||
if (this.compilationPromise) {
|
||||
return this.compilationPromise;
|
||||
}
|
||||
|
||||
// The entry file is just an empty helper as the dynamic template
|
||||
// require is added in "loader.js"
|
||||
const outputOptions = {
|
||||
filename: '__child-[name]',
|
||||
publicPath: mainCompilation.outputOptions.publicPath
|
||||
};
|
||||
const compilerName = 'HtmlWebpackCompiler';
|
||||
// Create an additional child compiler which takes the template
|
||||
// and turns it into an Node.JS html factory.
|
||||
// This allows us to use loaders during the compilation
|
||||
const childCompiler = mainCompilation.createChildCompiler(compilerName, outputOptions);
|
||||
// The file path context which webpack uses to resolve all relative files to
|
||||
childCompiler.context = mainCompilation.compiler.context;
|
||||
// Compile the template to nodejs javascript
|
||||
new NodeTemplatePlugin(outputOptions).apply(childCompiler);
|
||||
new NodeTargetPlugin().apply(childCompiler);
|
||||
new LibraryTemplatePlugin('HTML_WEBPACK_PLUGIN_RESULT', 'var').apply(childCompiler);
|
||||
new LoaderTargetPlugin('node').apply(childCompiler);
|
||||
|
||||
// Add all templates
|
||||
this.templates.forEach((template, index) => {
|
||||
new SingleEntryPlugin(childCompiler.context, template, `HtmlWebpackPlugin_${index}`).apply(childCompiler);
|
||||
});
|
||||
|
||||
this.compilationStartedTimestamp = new Date().getTime();
|
||||
this.compilationPromise = new Promise((resolve, reject) => {
|
||||
childCompiler.runAsChild((err, entries, childCompilation) => {
|
||||
// Extract templates
|
||||
const compiledTemplates = entries
|
||||
? extractHelperFilesFromCompilation(mainCompilation, childCompilation, outputOptions.filename, entries)
|
||||
: [];
|
||||
// Extract file dependencies
|
||||
if (entries) {
|
||||
this.fileDependencies = Array.from(childCompilation.fileDependencies);
|
||||
}
|
||||
// Reject the promise if the childCompilation contains error
|
||||
if (childCompilation && childCompilation.errors && childCompilation.errors.length) {
|
||||
const errorDetails = childCompilation.errors.map(error => error.message + (error.error ? ':\n' + error.error : '')).join('\n');
|
||||
reject(new Error('Child compilation failed:\n' + errorDetails));
|
||||
return;
|
||||
}
|
||||
// Reject if the error object contains errors
|
||||
if (err) {
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
/**
|
||||
* @type {{[templatePath: string]: { content: string, hash: string, entry: WebpackChunk }}}
|
||||
*/
|
||||
const result = {};
|
||||
compiledTemplates.forEach((templateSource, entryIndex) => {
|
||||
// The compiledTemplates are generated from the entries added in
|
||||
// the addTemplate function.
|
||||
// Therefore the array index of this.templates should be the as entryIndex.
|
||||
result[this.templates[entryIndex]] = {
|
||||
content: templateSource,
|
||||
hash: childCompilation.hash,
|
||||
entry: entries[entryIndex]
|
||||
};
|
||||
});
|
||||
this.compilationEndedTimestamp = new Date().getTime();
|
||||
resolve(result);
|
||||
});
|
||||
});
|
||||
|
||||
return this.compilationPromise;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The webpack child compilation will create files as a side effect.
|
||||
* This function will extract them and clean them up so they won't be written to disk.
|
||||
*
|
||||
* Returns the source code of the compiled templates as string
|
||||
*
|
||||
* @returns Array<string>
|
||||
*/
|
||||
function extractHelperFilesFromCompilation (mainCompilation, childCompilation, filename, childEntryChunks) {
|
||||
const helperAssetNames = childEntryChunks.map((entryChunk, index) => {
|
||||
return mainCompilation.mainTemplate.getAssetPath(filename, {
|
||||
hash: childCompilation.hash,
|
||||
chunk: entryChunk,
|
||||
name: `HtmlWebpackPlugin_${index}`
|
||||
});
|
||||
});
|
||||
|
||||
helperAssetNames.forEach((helperFileName) => {
|
||||
delete mainCompilation.assets[helperFileName];
|
||||
});
|
||||
|
||||
const helperContents = helperAssetNames.map((helperFileName) => {
|
||||
return childCompilation.assets[helperFileName].source();
|
||||
});
|
||||
|
||||
return helperContents;
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {WeakMap<WebpackCompiler, HtmlWebpackChildCompiler>}}
|
||||
*/
|
||||
const childCompilerCache = new WeakMap();
|
||||
|
||||
/**
|
||||
* Get child compiler from cache or a new child compiler for the given mainCompilation
|
||||
*
|
||||
* @param {WebpackCompiler} mainCompiler
|
||||
*/
|
||||
function getChildCompiler (mainCompiler) {
|
||||
const cachedChildCompiler = childCompilerCache.get(mainCompiler);
|
||||
if (cachedChildCompiler) {
|
||||
return cachedChildCompiler;
|
||||
}
|
||||
const newCompiler = new HtmlWebpackChildCompiler();
|
||||
childCompilerCache.set(mainCompiler, newCompiler);
|
||||
return newCompiler;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the childCompiler from the cache
|
||||
*
|
||||
* @param {WebpackCompiler} mainCompiler
|
||||
*/
|
||||
function clearCache (mainCompiler) {
|
||||
const childCompiler = getChildCompiler(mainCompiler);
|
||||
// If this childCompiler was already used
|
||||
// remove the entire childCompiler from the cache
|
||||
if (childCompiler.isCompiling() || childCompiler.didCompile()) {
|
||||
childCompilerCache.delete(mainCompiler);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a template for the current main compiler
|
||||
* @param {WebpackCompiler} mainCompiler
|
||||
* @param {string} templatePath
|
||||
*/
|
||||
function addTemplateToCompiler (mainCompiler, templatePath) {
|
||||
const childCompiler = getChildCompiler(mainCompiler);
|
||||
const isNew = childCompiler.addTemplate(templatePath);
|
||||
if (isNew) {
|
||||
clearCache(mainCompiler);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Starts the compilation for all templates.
|
||||
* This has to be called once all templates where added.
|
||||
*
|
||||
* If this function is called multiple times it will use a cache inside
|
||||
* the childCompiler
|
||||
*
|
||||
* @param {string} templatePath
|
||||
* @param {string} outputFilename
|
||||
* @param {WebpackCompilation} mainCompilation
|
||||
*/
|
||||
function compileTemplate (templatePath, outputFilename, mainCompilation) {
|
||||
const childCompiler = getChildCompiler(mainCompilation.compiler);
|
||||
return childCompiler.compileTemplates(mainCompilation).then((compiledTemplates) => {
|
||||
if (!compiledTemplates[templatePath]) console.log(Object.keys(compiledTemplates), templatePath);
|
||||
const compiledTemplate = compiledTemplates[templatePath];
|
||||
// Replace [hash] placeholders in filename
|
||||
const outputName = mainCompilation.mainTemplate.getAssetPath(outputFilename, {
|
||||
hash: compiledTemplate.hash,
|
||||
chunk: compiledTemplate.entry
|
||||
});
|
||||
return {
|
||||
// Hash of the template entry point
|
||||
hash: compiledTemplate.hash,
|
||||
// Output name
|
||||
outputName: outputName,
|
||||
// Compiled code
|
||||
content: compiledTemplate.content
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Return all file dependencies of the last child compilation
|
||||
*
|
||||
* @param {WebpackCompiler} compiler
|
||||
* @returns {Array<string>}
|
||||
*/
|
||||
function getFileDependencies (compiler) {
|
||||
const childCompiler = getChildCompiler(compiler);
|
||||
return childCompiler.fileDependencies;
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {WeakMap<WebpackCompilation, WeakMap<HtmlWebpackChildCompiler, boolean>>}}
|
||||
*/
|
||||
const hasOutdatedCompilationDependenciesMap = new WeakMap();
|
||||
/**
|
||||
* Returns `true` if the file dependencies of the current childCompiler
|
||||
* for the given mainCompilation are outdated.
|
||||
*
|
||||
* Uses the `hasOutdatedCompilationDependenciesMap` cache if possible.
|
||||
*
|
||||
* @param {WebpackCompilation} mainCompilation
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function hasOutDatedTemplateCache (mainCompilation) {
|
||||
const childCompiler = getChildCompiler(mainCompilation.compiler);
|
||||
/**
|
||||
* @type {WeakMap<HtmlWebpackChildCompiler, boolean>|undefined}
|
||||
*/
|
||||
let hasOutdatedChildCompilerDependenciesMap = hasOutdatedCompilationDependenciesMap.get(mainCompilation);
|
||||
// Create map for childCompiler if none exist
|
||||
if (!hasOutdatedChildCompilerDependenciesMap) {
|
||||
hasOutdatedChildCompilerDependenciesMap = new WeakMap();
|
||||
hasOutdatedCompilationDependenciesMap.set(mainCompilation, hasOutdatedChildCompilerDependenciesMap);
|
||||
}
|
||||
// Try to get the `checkChildCompilerCache` result from cache
|
||||
let isOutdated = hasOutdatedChildCompilerDependenciesMap.get(childCompiler);
|
||||
if (isOutdated !== undefined) {
|
||||
return isOutdated;
|
||||
}
|
||||
// If `checkChildCompilerCache` has never been called for the given
|
||||
// `mainCompilation` and `childCompiler` combination call it:
|
||||
isOutdated = isChildCompilerCacheOutdated(mainCompilation, childCompiler);
|
||||
hasOutdatedChildCompilerDependenciesMap.set(childCompiler, isOutdated);
|
||||
return isOutdated;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns `true` if the file dependencies of the given childCompiler are outdated.
|
||||
*
|
||||
* @param {WebpackCompilation} mainCompilation
|
||||
* @param {HtmlWebpackChildCompiler} childCompiler
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function isChildCompilerCacheOutdated (mainCompilation, childCompiler) {
|
||||
// If the compilation was never run there is no invalid cache
|
||||
if (!childCompiler.compilationStartedTimestamp) {
|
||||
return false;
|
||||
}
|
||||
// Check if any dependent file was changed after the last compilation
|
||||
const fileTimestamps = mainCompilation.fileTimestamps;
|
||||
const isCacheOutOfDate = childCompiler.fileDependencies.some((fileDependency) => {
|
||||
const timestamp = fileTimestamps.get(fileDependency);
|
||||
// If the timestamp is not known the file is new
|
||||
// If the timestamp is larger then the file has changed
|
||||
// Otherwise the file is still the same
|
||||
return !timestamp || timestamp > childCompiler.compilationStartedTimestamp;
|
||||
});
|
||||
return isCacheOutOfDate;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
addTemplateToCompiler,
|
||||
compileTemplate,
|
||||
hasOutDatedTemplateCache,
|
||||
clearCache,
|
||||
getFileDependencies
|
||||
};
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
// @ts-nocheck
|
||||
'use strict';
|
||||
const PrettyError = require('pretty-error');
|
||||
const prettyError = new PrettyError();
|
||||
prettyError.withoutColors();
|
||||
prettyError.skipPackage('html-plugin-evaluation');
|
||||
prettyError.skipNodeFiles();
|
||||
prettyError.skip(function (traceLine) {
|
||||
return traceLine.path === 'html-plugin-evaluation';
|
||||
});
|
||||
|
||||
module.exports = function (err, context) {
|
||||
return {
|
||||
toHtml: function () {
|
||||
return 'Html Webpack Plugin:\n<pre>\n' + this.toString() + '</pre>';
|
||||
},
|
||||
toJsonHtml: function () {
|
||||
return JSON.stringify(this.toHtml());
|
||||
},
|
||||
toString: function () {
|
||||
try {
|
||||
return prettyError.render(err).replace(/webpack:\/\/\/\./g, context);
|
||||
} catch (e) {
|
||||
// This can sometimes fail. We don't know why, but returning the
|
||||
// original error is better than returning the error thrown by
|
||||
// pretty-error.
|
||||
return err;
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
+106
@@ -0,0 +1,106 @@
|
||||
// @ts-check
|
||||
/** @typedef {import("../typings").Hooks} HtmlWebpackPluginHooks */
|
||||
'use strict';
|
||||
/**
|
||||
* This file provides access to all public htmlWebpackPlugin hooks
|
||||
*/
|
||||
|
||||
/** @typedef {import("webpack/lib/Compilation.js")} WebpackCompilation */
|
||||
/** @typedef {import("../index.js")} HtmlWebpackPlugin */
|
||||
|
||||
const AsyncSeriesWaterfallHook = require('tapable').AsyncSeriesWaterfallHook;
|
||||
|
||||
// The following is the API definition for all available hooks
|
||||
// For the TypeScript definition, see the Hooks type in typings.d.ts
|
||||
/**
|
||||
beforeAssetTagGeneration:
|
||||
AsyncSeriesWaterfallHook<{
|
||||
assets: {
|
||||
publicPath: string,
|
||||
js: Array<string>,
|
||||
css: Array<string>,
|
||||
favicon?: string | undefined,
|
||||
manifest?: string | undefined
|
||||
},
|
||||
outputName: string,
|
||||
plugin: HtmlWebpackPlugin
|
||||
}>,
|
||||
alterAssetTags:
|
||||
AsyncSeriesWaterfallHook<{
|
||||
assetTags: {
|
||||
scripts: Array<HtmlTagObject>,
|
||||
styles: Array<HtmlTagObject>,
|
||||
meta: Array<HtmlTagObject>,
|
||||
},
|
||||
outputName: string,
|
||||
plugin: HtmlWebpackPlugin
|
||||
}>,
|
||||
alterAssetTagGroups:
|
||||
AsyncSeriesWaterfallHook<{
|
||||
headTags: Array<HtmlTagObject | HtmlTagObject>,
|
||||
bodyTags: Array<HtmlTagObject | HtmlTagObject>,
|
||||
outputName: string,
|
||||
plugin: HtmlWebpackPlugin
|
||||
}>,
|
||||
afterTemplateExecution:
|
||||
AsyncSeriesWaterfallHook<{
|
||||
html: string,
|
||||
headTags: Array<HtmlTagObject | HtmlTagObject>,
|
||||
bodyTags: Array<HtmlTagObject | HtmlTagObject>,
|
||||
outputName: string,
|
||||
plugin: HtmlWebpackPlugin,
|
||||
}>,
|
||||
beforeEmit:
|
||||
AsyncSeriesWaterfallHook<{
|
||||
html: string,
|
||||
outputName: string,
|
||||
plugin: HtmlWebpackPlugin,
|
||||
}>,
|
||||
afterEmit:
|
||||
AsyncSeriesWaterfallHook<{
|
||||
outputName: string,
|
||||
plugin: HtmlWebpackPlugin
|
||||
}>
|
||||
*/
|
||||
|
||||
/**
|
||||
* @type {WeakMap<WebpackCompilation, HtmlWebpackPluginHooks>}}
|
||||
*/
|
||||
const htmlWebpackPluginHooksMap = new WeakMap();
|
||||
|
||||
/**
|
||||
* Returns all public hooks of the html webpack plugin for the given compilation
|
||||
*
|
||||
* @param {WebpackCompilation} compilation
|
||||
* @returns {HtmlWebpackPluginHooks}
|
||||
*/
|
||||
function getHtmlWebpackPluginHooks (compilation) {
|
||||
let hooks = htmlWebpackPluginHooksMap.get(compilation);
|
||||
// Setup the hooks only once
|
||||
if (hooks === undefined) {
|
||||
hooks = createHtmlWebpackPluginHooks();
|
||||
htmlWebpackPluginHooksMap.set(compilation, hooks);
|
||||
}
|
||||
return hooks;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add hooks to the webpack compilation object to allow foreign plugins to
|
||||
* extend the HtmlWebpackPlugin
|
||||
*
|
||||
* @returns {HtmlWebpackPluginHooks}
|
||||
*/
|
||||
function createHtmlWebpackPluginHooks () {
|
||||
return {
|
||||
beforeAssetTagGeneration: new AsyncSeriesWaterfallHook(['pluginArgs']),
|
||||
alterAssetTags: new AsyncSeriesWaterfallHook(['pluginArgs']),
|
||||
alterAssetTagGroups: new AsyncSeriesWaterfallHook(['pluginArgs']),
|
||||
afterTemplateExecution: new AsyncSeriesWaterfallHook(['pluginArgs']),
|
||||
beforeEmit: new AsyncSeriesWaterfallHook(['pluginArgs']),
|
||||
afterEmit: new AsyncSeriesWaterfallHook(['pluginArgs'])
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getHtmlWebpackPluginHooks
|
||||
};
|
||||
+71
@@ -0,0 +1,71 @@
|
||||
// @ts-check
|
||||
/** @typedef {import("../typings").HtmlTagObject} HtmlTagObject */
|
||||
/**
|
||||
* @file
|
||||
* This file provides to helper to create html as a object repesentation as
|
||||
* thoses objects are easier to modify than pure string representations
|
||||
*
|
||||
* Usage:
|
||||
* ```
|
||||
* const element = createHtmlTagObject('h1', {class: 'demo'}, 'Hello World');
|
||||
* const html = htmlTagObjectToString(element);
|
||||
* console.log(html) // -> <h1 class="demo">Hello World</h1>
|
||||
* ```
|
||||
*/
|
||||
|
||||
/**
|
||||
* All html tag elements which must not contain innerHTML
|
||||
* @see https://www.w3.org/TR/html5/syntax.html#void-elements
|
||||
*/
|
||||
const voidTags = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
|
||||
|
||||
/**
|
||||
* Turn a tag definition into a html string
|
||||
* @param {HtmlTagObject} tagDefinition
|
||||
* A tag element according to the htmlWebpackPlugin object notation
|
||||
*
|
||||
* @param xhtml {boolean}
|
||||
* Wether the generated html should add closing slashes to be xhtml compliant
|
||||
*/
|
||||
function htmlTagObjectToString (tagDefinition, xhtml) {
|
||||
const attributes = Object.keys(tagDefinition.attributes || {})
|
||||
.filter(function (attributeName) {
|
||||
return tagDefinition.attributes[attributeName] !== false;
|
||||
})
|
||||
.map(function (attributeName) {
|
||||
if (tagDefinition.attributes[attributeName] === true) {
|
||||
return xhtml ? attributeName + '="' + attributeName + '"' : attributeName;
|
||||
}
|
||||
return attributeName + '="' + tagDefinition.attributes[attributeName] + '"';
|
||||
});
|
||||
return '<' + [tagDefinition.tagName].concat(attributes).join(' ') + (tagDefinition.voidTag && xhtml ? '/' : '') + '>' +
|
||||
(tagDefinition.innerHTML || '') +
|
||||
(tagDefinition.voidTag ? '' : '</' + tagDefinition.tagName + '>');
|
||||
}
|
||||
|
||||
/**
|
||||
* Static helper to create a tag object to be get injected into the dom
|
||||
*
|
||||
* @param {string} tagName
|
||||
* the name of the tage e.g. 'div'
|
||||
*
|
||||
* @param {{[attributeName: string]: string|boolean}} [attributes]
|
||||
* tag attributes e.g. `{ 'class': 'example', disabled: true }`
|
||||
*
|
||||
* @param {string} [innerHTML]
|
||||
*
|
||||
* @returns {HtmlTagObject}
|
||||
*/
|
||||
function createHtmlTagObject (tagName, attributes, innerHTML) {
|
||||
return {
|
||||
tagName: tagName,
|
||||
voidTag: voidTags.indexOf(tagName) !== -1,
|
||||
attributes: attributes || {},
|
||||
innerHTML: innerHTML
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
createHtmlTagObject: createHtmlTagObject,
|
||||
htmlTagObjectToString: htmlTagObjectToString
|
||||
};
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
/* This loader renders the template with underscore if no other loader was found */
|
||||
// @ts-nocheck
|
||||
'use strict';
|
||||
const _ = require('lodash');
|
||||
const loaderUtils = require('loader-utils');
|
||||
|
||||
module.exports = function (source) {
|
||||
// Get templating options
|
||||
const options = this.query !== '' ? loaderUtils.getOptions(this) : {};
|
||||
const force = options.force || false;
|
||||
|
||||
const allLoadersButThisOne = this.loaders.filter(function (loader) {
|
||||
return loader.normal !== module.exports;
|
||||
});
|
||||
// This loader shouldn't kick in if there is any other loader (unless it's explicitly enforced)
|
||||
if (allLoadersButThisOne.length > 0 && !force) {
|
||||
return source;
|
||||
}
|
||||
// Skip .js files (unless it's explicitly enforced)
|
||||
if (/\.js$/.test(this.resourcePath) && !force) {
|
||||
return source;
|
||||
}
|
||||
|
||||
// The following part renders the template with lodash as a minimalistic loader
|
||||
//
|
||||
const template = _.template(source, _.defaults(options, { interpolate: /<%=([\s\S]+?)%>/g, variable: 'data' }));
|
||||
// Use __non_webpack_require__ to enforce using the native nodejs require
|
||||
// during template execution
|
||||
return 'var _ = __non_webpack_require__(' + JSON.stringify(require.resolve('lodash')) + ');' +
|
||||
'module.exports = function (templateParams) { with(templateParams) {' +
|
||||
// Execute the lodash template
|
||||
'return (' + template.source + ')();' +
|
||||
'}}';
|
||||
};
|
||||
+123
@@ -0,0 +1,123 @@
|
||||
{
|
||||
"_from": "html-webpack-plugin@*",
|
||||
"_id": "html-webpack-plugin@4.0.4",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha512-BREQzUbFfIQS39KqxkT2L1Ot0tuu1isako1CaCQLrgEQ43zi2ScHAe3SMTnVBWsStnIsGtl8jprDdxwZkNhrwQ==",
|
||||
"_location": "/html-webpack-plugin",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "range",
|
||||
"registry": true,
|
||||
"raw": "html-webpack-plugin@*",
|
||||
"name": "html-webpack-plugin",
|
||||
"escapedName": "html-webpack-plugin",
|
||||
"rawSpec": "*",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "*"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"#DEV:/"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.0.4.tgz",
|
||||
"_shasum": "90cdfb168094e93e047174d9baca098ec5540636",
|
||||
"_spec": "html-webpack-plugin@*",
|
||||
"_where": "O:\\zero\\zero.Web",
|
||||
"author": {
|
||||
"name": "Jan Nicklas",
|
||||
"email": "j.nicklas@me.com",
|
||||
"url": "https://github.com/jantimon"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/jantimon/html-webpack-plugin/issues"
|
||||
},
|
||||
"bundleDependencies": false,
|
||||
"config": {
|
||||
"commitizen": {
|
||||
"path": "./node_modules/cz-conventional-changelog"
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/html-minifier-terser": "^5.0.0",
|
||||
"@types/tapable": "^1.0.5",
|
||||
"@types/webpack": "^4.41.8",
|
||||
"html-minifier-terser": "^5.0.1",
|
||||
"loader-utils": "^1.2.3",
|
||||
"lodash": "^4.17.15",
|
||||
"pretty-error": "^2.1.1",
|
||||
"tapable": "^1.1.3",
|
||||
"util.promisify": "1.0.0"
|
||||
},
|
||||
"deprecated": false,
|
||||
"description": "Simplifies creation of HTML files to serve your webpack bundles",
|
||||
"devDependencies": {
|
||||
"@types/loader-utils": "1.1.3",
|
||||
"@types/node": "11.13.9",
|
||||
"appcache-webpack-plugin": "1.4.0",
|
||||
"commitizen": "4.0.3",
|
||||
"css-loader": "2.1.1",
|
||||
"cz-conventional-changelog": "2.1.0",
|
||||
"dir-compare": "1.7.2",
|
||||
"file-loader": "3.0.1",
|
||||
"html-loader": "0.5.5",
|
||||
"jest": "24.7.1",
|
||||
"mini-css-extract-plugin": "0.6.0",
|
||||
"pug": "2.0.3",
|
||||
"pug-loader": "2.4.0",
|
||||
"rimraf": "2.6.3",
|
||||
"semistandard": "13.0.1",
|
||||
"standard-version": "5.0.2",
|
||||
"style-loader": "0.23.1",
|
||||
"typescript": "3.5.2",
|
||||
"webpack": "4.35.2",
|
||||
"webpack-recompilation-simulator": "3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9"
|
||||
},
|
||||
"files": [
|
||||
"lib/",
|
||||
"index.js",
|
||||
"default_index.ejs",
|
||||
"typings.d.ts"
|
||||
],
|
||||
"homepage": "https://github.com/jantimon/html-webpack-plugin",
|
||||
"jest": {
|
||||
"watchPathIgnorePatterns": [
|
||||
"<rootDir>/dist"
|
||||
],
|
||||
"testEnvironment": "node"
|
||||
},
|
||||
"keywords": [
|
||||
"webpack",
|
||||
"plugin",
|
||||
"html",
|
||||
"html-webpack-plugin"
|
||||
],
|
||||
"license": "MIT",
|
||||
"main": "index.js",
|
||||
"name": "html-webpack-plugin",
|
||||
"peerDependencies": {
|
||||
"webpack": "^4.0.0"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/jantimon/html-webpack-plugin.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build-examples": "node examples/build-examples.js",
|
||||
"commit": "git-cz",
|
||||
"posttest": "tsc",
|
||||
"pretest": "semistandard",
|
||||
"puml": "npx puml generate flow.puml -o flow.png",
|
||||
"release": "standard-version",
|
||||
"test": "jest --runInBand --verbose --coverage",
|
||||
"test-watch": "jest --runInBand --watch"
|
||||
},
|
||||
"semistandard": {
|
||||
"ignore": [
|
||||
"examples/*/dist/**/*.*"
|
||||
]
|
||||
},
|
||||
"types": "typings.d.ts",
|
||||
"version": "4.0.4"
|
||||
}
|
||||
+248
@@ -0,0 +1,248 @@
|
||||
import { AsyncSeriesWaterfallHook } from "tapable";
|
||||
import { Compiler, compilation } from 'webpack';
|
||||
import { Options as HtmlMinifierOptions } from "html-minifier-terser";
|
||||
|
||||
export = HtmlWebpackPlugin;
|
||||
|
||||
declare class HtmlWebpackPlugin {
|
||||
constructor(options?: HtmlWebpackPlugin.Options);
|
||||
|
||||
apply(compiler: Compiler): void;
|
||||
|
||||
static getHooks(compilation: compilation.Compilation): HtmlWebpackPlugin.Hooks;
|
||||
}
|
||||
|
||||
declare namespace HtmlWebpackPlugin {
|
||||
type MinifyOptions = HtmlMinifierOptions;
|
||||
|
||||
interface Options extends Partial<ProcessedOptions> {}
|
||||
|
||||
/**
|
||||
* The plugin options after adding default values
|
||||
*/
|
||||
interface ProcessedOptions {
|
||||
/**
|
||||
* Emit the file only if it was changed.
|
||||
* Default: `true`.
|
||||
*/
|
||||
cache: boolean;
|
||||
/**
|
||||
* List all entries which should be injected
|
||||
*/
|
||||
chunks: "all" | string[];
|
||||
/**
|
||||
* Allows to control how chunks should be sorted before they are included to the html.
|
||||
* Default: `'auto'`.
|
||||
*/
|
||||
chunksSortMode:
|
||||
| "auto"
|
||||
| "manual"
|
||||
| (((entryNameA: string, entryNameB: string) => number));
|
||||
/**
|
||||
* List all entries which should not be injeccted
|
||||
*/
|
||||
excludeChunks: string[];
|
||||
/**
|
||||
* Path to the favicon icon
|
||||
*/
|
||||
favicon: false | string;
|
||||
/**
|
||||
* The file to write the HTML to.
|
||||
* Defaults to `index.html`.
|
||||
* Supports subdirectories eg: `assets/admin.html`
|
||||
*/
|
||||
filename: string;
|
||||
/**
|
||||
* If `true` then append a unique `webpack` compilation hash to all included scripts and CSS files.
|
||||
* This is useful for cache busting
|
||||
*/
|
||||
hash: boolean;
|
||||
/**
|
||||
* Inject all assets into the given `template` or `templateContent`.
|
||||
*/
|
||||
inject:
|
||||
| false // Don't inject scripts
|
||||
| true // Inject scripts into body
|
||||
| "body" // Inject scripts into body
|
||||
| "head" // Inject scripts into head
|
||||
/**
|
||||
* Set up script loading
|
||||
* blocking will result in <script src="..."></script>
|
||||
* defer will result in <script defer src="..."></script>
|
||||
*
|
||||
* The default behaviour is blocking
|
||||
*/
|
||||
scriptLoading:
|
||||
| "blocking"
|
||||
| "defer"
|
||||
/**
|
||||
* Inject meta tags
|
||||
*/
|
||||
meta:
|
||||
| false // Disable injection
|
||||
| {
|
||||
[name: string]:
|
||||
| string
|
||||
| false // name content pair e.g. {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}`
|
||||
| { [attributeName: string]: string | boolean }; // custom properties e.g. { name:"viewport" content:"width=500, initial-scale=1" }
|
||||
};
|
||||
/**
|
||||
* HTML Minification options accepts the following valeus:
|
||||
* - Set to `false` to disable minifcation
|
||||
* - Set to `'auto'` to enable minifcation only for production mode
|
||||
* - Set to custom minification according to
|
||||
* @https://github.com/kangax/html-minifier#options-quick-reference
|
||||
*/
|
||||
minify: 'auto' | boolean | MinifyOptions;
|
||||
/**
|
||||
* Render errors into the HTML page
|
||||
*/
|
||||
showErrors: boolean;
|
||||
/**
|
||||
* The `webpack` require path to the template.
|
||||
* @see https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md
|
||||
*/
|
||||
template: string;
|
||||
/**
|
||||
* Allow to use a html string instead of reading from a file
|
||||
*/
|
||||
templateContent:
|
||||
| false // Use the template option instead to load a file
|
||||
| string
|
||||
| Promise<string>;
|
||||
/**
|
||||
* Allows to overwrite the parameters used in the template
|
||||
*/
|
||||
templateParameters:
|
||||
| false // Pass an empty object to the template function
|
||||
| ((
|
||||
compilation: any,
|
||||
assets: {
|
||||
publicPath: string;
|
||||
js: Array<string>;
|
||||
css: Array<string>;
|
||||
manifest?: string;
|
||||
favicon?: string;
|
||||
},
|
||||
assetTags: {
|
||||
headTags: HtmlTagObject[];
|
||||
bodyTags: HtmlTagObject[];
|
||||
},
|
||||
options: ProcessedOptions
|
||||
) => { [option: string]: any } | Promise<{ [option: string]: any }>)
|
||||
| { [option: string]: any };
|
||||
/**
|
||||
* The title to use for the generated HTML document
|
||||
*/
|
||||
title: string;
|
||||
/**
|
||||
* Enforce self closing tags e.g. <link />
|
||||
*/
|
||||
xhtml: boolean;
|
||||
/**
|
||||
* In addition to the options actually used by this plugin, you can use this hash to pass arbitrary data through
|
||||
* to your template.
|
||||
*/
|
||||
[option: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* The values which are available during template execution
|
||||
*
|
||||
* Please keep in mind that the `templateParameter` options allows to change them
|
||||
*/
|
||||
interface TemplateParameter {
|
||||
compilation: any;
|
||||
htmlWebpackPlugin: {
|
||||
tags: {
|
||||
headTags: HtmlTagObject[];
|
||||
bodyTags: HtmlTagObject[];
|
||||
};
|
||||
files: {
|
||||
publicPath: string;
|
||||
js: Array<string>;
|
||||
css: Array<string>;
|
||||
manifest?: string;
|
||||
favicon?: string;
|
||||
};
|
||||
options: Options;
|
||||
};
|
||||
webpackConfig: any;
|
||||
}
|
||||
|
||||
interface Hooks {
|
||||
alterAssetTags: AsyncSeriesWaterfallHook<{
|
||||
assetTags: {
|
||||
scripts: HtmlTagObject[];
|
||||
styles: HtmlTagObject[];
|
||||
meta: HtmlTagObject[];
|
||||
};
|
||||
outputName: string;
|
||||
plugin: HtmlWebpackPlugin;
|
||||
}>;
|
||||
|
||||
alterAssetTagGroups: AsyncSeriesWaterfallHook<{
|
||||
headTags: HtmlTagObject[];
|
||||
bodyTags: HtmlTagObject[];
|
||||
outputName: string;
|
||||
plugin: HtmlWebpackPlugin;
|
||||
}>;
|
||||
|
||||
afterTemplateExecution: AsyncSeriesWaterfallHook<{
|
||||
html: string;
|
||||
headTags: HtmlTagObject[];
|
||||
bodyTags: HtmlTagObject[];
|
||||
outputName: string;
|
||||
plugin: HtmlWebpackPlugin;
|
||||
}>;
|
||||
|
||||
beforeAssetTagGeneration: AsyncSeriesWaterfallHook<{
|
||||
assets: {
|
||||
publicPath: string;
|
||||
js: Array<string>;
|
||||
css: Array<string>;
|
||||
favicon?: string;
|
||||
manifest?: string;
|
||||
};
|
||||
outputName: string;
|
||||
plugin: HtmlWebpackPlugin;
|
||||
}>;
|
||||
|
||||
beforeEmit: AsyncSeriesWaterfallHook<{
|
||||
html: string;
|
||||
outputName: string;
|
||||
plugin: HtmlWebpackPlugin;
|
||||
}>;
|
||||
|
||||
afterEmit: AsyncSeriesWaterfallHook<{
|
||||
outputName: string;
|
||||
plugin: HtmlWebpackPlugin;
|
||||
}>;
|
||||
}
|
||||
|
||||
/**
|
||||
* A tag element according to the htmlWebpackPlugin object notation
|
||||
*/
|
||||
interface HtmlTagObject {
|
||||
/**
|
||||
* Attributes of the html tag
|
||||
* E.g. `{'disabled': true, 'value': 'demo'}`
|
||||
*/
|
||||
attributes: {
|
||||
[attributeName: string]: string | boolean;
|
||||
};
|
||||
/**
|
||||
* The tag name e.g. `'div'`
|
||||
*/
|
||||
tagName: string;
|
||||
/**
|
||||
* The inner HTML
|
||||
*/
|
||||
innerHTML?: string;
|
||||
/**
|
||||
* Whether this html must not contain innerHTML
|
||||
* @see https://www.w3.org/TR/html5/syntax.html#void-elements
|
||||
*/
|
||||
voidTag: boolean;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user