html-webpack-plugin 3.1.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/README.md +14 -3
  3. package/index.js +42 -21
  4. package/lib/chunksorter.js +4 -2
  5. package/lib/loader.js +4 -20
  6. package/package.json +10 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,23 @@
2
2
 
3
3
  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
4
 
5
+ <a name="3.2.0"></a>
6
+ # [3.2.0](https://github.com/jantimon/html-webpack-plugin/compare/v3.1.0...v3.2.0) (2018-04-03)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **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)
12
+ * **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)
13
+
14
+
15
+ ### Features
16
+
17
+ * Add meta tag option ([a7d37ca](https://github.com/jantimon/html-webpack-plugin/commit/a7d37ca))
18
+ * 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)
19
+
20
+
21
+
5
22
  <a name="3.1.0"></a>
6
23
  # [3.1.0](https://github.com/jantimon/html-webpack-plugin/compare/v3.0.8...v3.1.0) (2018-03-22)
7
24
 
package/README.md CHANGED
@@ -55,6 +55,8 @@ The `html-webpack-plugin` provides [hooks](https://github.com/jantimon/html-webp
55
55
  * [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>`
56
56
  * [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.
57
57
  * [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.
58
+ * [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.
59
+
58
60
 
59
61
  <h2 align="center">Usage</h2>
60
62
 
@@ -113,13 +115,14 @@ Allowed values are as follows
113
115
  |**[`templateParameters`](#)**|`{Boolean\|Object\|Function}`|``| Allows to overwrite the parameters used in the template |
114
116
  |**[`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|
115
117
  |**[`favicon`](#)**|`{String}`|``|Adds the given favicon path to the output HTML|
118
+ |**[`meta`](#)**|`{Object}`|`{}`|Allows to inject `meta`-tags. E.g. `meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}`|
116
119
  |**[`minify`](#)**|`{Boolean\|Object}`|`true`|Pass [html-minifier](https://github.com/kangax/html-minifier#options-quick-reference)'s options as object to minify the output|
117
120
  |**[`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|
118
121
  |**[`cache`](#)**|`{Boolean}`|`true`|Emit the file only if it was changed|
119
122
  |**[`showErrors`](#)**|`{Boolean}`|`true`|Errors details will be written into the HTML page|
120
123
  |**[`chunks`](#)**|`{?}`|`?`|Allows you to add only some chunks (e.g only the unit-test chunk)|
121
124
  |**[`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}`|
122
- |**[`excludeChunks`](#)**|`{String}`|``|Allows you to skip some chunks (e.g don't add the unit-test chunk)|
125
+ |**[`excludeChunks`](#)**|`{Array.<string>}`|``|Allows you to skip some chunks (e.g don't add the unit-test chunk)|
123
126
  |**[`xhtml`](#)**|`{Boolean}`|`false`|If `true` render the `link` tags as self-closing (XHTML compliant)|
124
127
 
125
128
  Here's an example webpack config illustrating how to use these options
@@ -383,8 +386,16 @@ This project uses the [semistandard code style](https://github.com/Flet/semistan
383
386
 
384
387
  Thank you to all our backers! 🙏 [Become a backer](https://opencollective.com/html-webpack-plugin#backer)
385
388
 
386
- <a href="https://opencollective.com/html-webpack-plugin#backers" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backers.svg?width=890"></a>
387
-
389
+ <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>
390
+ <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>
391
+ <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>
392
+ <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>
393
+ <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>
394
+ <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>
395
+ <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>
396
+ <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>
397
+ <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>
398
+ <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>
388
399
 
389
400
  ## Sponsors
390
401
 
package/index.js CHANGED
@@ -30,6 +30,8 @@ class HtmlWebpackPlugin {
30
30
  showErrors: true,
31
31
  chunks: 'all',
32
32
  excludeChunks: [],
33
+ chunksSortMode: 'auto',
34
+ meta: {},
33
35
  title: 'Webpack App',
34
36
  xhtml: false
35
37
  }, options);
@@ -108,7 +110,7 @@ class HtmlWebpackPlugin {
108
110
  // Filter chunks (options.chunks and options.excludeCHunks)
109
111
  let chunks = self.filterChunks(allChunks, self.options.chunks, self.options.excludeChunks);
110
112
  // Sort chunks
111
- chunks = self.sortChunks(chunks, self.options.chunksSortMode, compilation.chunkGroups);
113
+ chunks = self.sortChunks(chunks, self.options.chunksSortMode, compilation);
112
114
  // Let plugins alter the chunks and the chunk sorting
113
115
  if (compilation.hooks) {
114
116
  chunks = compilation.hooks.htmlWebpackPluginAlterChunks.call(chunks, { plugin: self });
@@ -179,7 +181,7 @@ class HtmlWebpackPlugin {
179
181
  const html = result.html;
180
182
  const assets = result.assets;
181
183
  // Prepare script and link tags
182
- const assetTags = self.generateAssetTags(assets);
184
+ const assetTags = self.generateHtmlTags(assets);
183
185
  const pluginArgs = {head: assetTags.head, body: assetTags.body, plugin: self, chunks: chunks, outputName: self.childCompilationOutputName};
184
186
  // Allow plugins to change the assetTag definitions
185
187
  return applyPluginsAsyncWaterfall('html-webpack-plugin-alter-asset-tags', true, pluginArgs)
@@ -352,25 +354,14 @@ class HtmlWebpackPlugin {
352
354
  /**
353
355
  * Helper to sort chunks
354
356
  */
355
- sortChunks (chunks, sortMode, chunkGroups) {
356
- // Sort mode auto by default:
357
- if (typeof sortMode === 'undefined') {
358
- sortMode = 'auto';
359
- }
357
+ sortChunks (chunks, sortMode, compilation) {
360
358
  // Custom function
361
359
  if (typeof sortMode === 'function') {
362
360
  return chunks.sort(sortMode);
363
361
  }
364
- // Disabled sorting:
365
- if (sortMode === 'none') {
366
- return chunkSorter.none(chunks);
367
- }
368
- if (sortMode === 'manual') {
369
- return chunkSorter.manual(chunks, this.options.chunks);
370
- }
371
362
  // Check if the given sort mode is a valid chunkSorter sort mode
372
363
  if (typeof chunkSorter[sortMode] !== 'undefined') {
373
- return chunkSorter[sortMode](chunks, chunkGroups);
364
+ return chunkSorter[sortMode](chunks, this.options, compilation);
374
365
  }
375
366
  throw new Error('"' + sortMode + '" is not a valid chunk sort mode');
376
367
  }
@@ -482,15 +473,44 @@ class HtmlWebpackPlugin {
482
473
  return assets;
483
474
  }
484
475
 
476
+ /**
477
+ * Generate meta tags
478
+ */
479
+ getMetaTags () {
480
+ if (this.options.meta === false) {
481
+ return [];
482
+ }
483
+ // Make tags self-closing in case of xhtml
484
+ // Turn { "viewport" : "width=500, initial-scale=1" } into
485
+ // [{ name:"viewport" content:"width=500, initial-scale=1" }]
486
+ const selfClosingTag = !!this.options.xhtml;
487
+ const metaTagAttributeObjects = Object.keys(this.options.meta).map((metaName) => {
488
+ const metaTagContent = this.options.meta[metaName];
489
+ return (typeof metaTagContent === 'object') ? metaTagContent : {
490
+ name: metaName,
491
+ content: metaTagContent
492
+ };
493
+ });
494
+ // Turn [{ name:"viewport" content:"width=500, initial-scale=1" }] into
495
+ // the html-webpack-plugin tag structure
496
+ return metaTagAttributeObjects.map((metaTagAttributes) => {
497
+ return {
498
+ tagName: 'meta',
499
+ voidTag: true,
500
+ selfClosingTag: selfClosingTag,
501
+ attributes: metaTagAttributes
502
+ };
503
+ });
504
+ }
505
+
485
506
  /**
486
507
  * Injects the assets into the given html string
487
508
  */
488
- generateAssetTags (assets) {
509
+ generateHtmlTags (assets) {
489
510
  // Turn script files into script tags
490
511
  const scripts = assets.js.map(scriptPath => ({
491
512
  tagName: 'script',
492
513
  closeTag: true,
493
-
494
514
  attributes: {
495
515
  type: 'text/javascript',
496
516
  src: scriptPath
@@ -502,14 +522,14 @@ class HtmlWebpackPlugin {
502
522
  const styles = assets.css.map(stylePath => ({
503
523
  tagName: 'link',
504
524
  selfClosingTag: selfClosingTag,
505
-
525
+ voidTag: true,
506
526
  attributes: {
507
527
  href: stylePath,
508
528
  rel: 'stylesheet'
509
529
  }
510
530
  }));
511
531
  // Injection targets
512
- let head = [];
532
+ let head = this.getMetaTags();
513
533
  let body = [];
514
534
 
515
535
  // If there is a favicon present, add it to the head
@@ -517,6 +537,7 @@ class HtmlWebpackPlugin {
517
537
  head.push({
518
538
  tagName: 'link',
519
539
  selfClosingTag: selfClosingTag,
540
+ voidTag: true,
520
541
  attributes: {
521
542
  rel: 'shortcut icon',
522
543
  href: assets.favicon
@@ -541,8 +562,8 @@ class HtmlWebpackPlugin {
541
562
  const htmlRegExp = /(<html[^>]*>)/i;
542
563
  const headRegExp = /(<\/head\s*>)/i;
543
564
  const bodyRegExp = /(<\/body\s*>)/i;
544
- const body = assetTags.body.map(this.createHtmlTag);
545
- const head = assetTags.head.map(this.createHtmlTag);
565
+ const body = assetTags.body.map(this.createHtmlTag.bind(this));
566
+ const head = assetTags.head.map(this.createHtmlTag.bind(this));
546
567
 
547
568
  if (body.length) {
548
569
  if (bodyRegExp.test(html)) {
package/lib/chunksorter.js CHANGED
@@ -26,7 +26,8 @@ const _ = require('lodash');
26
26
 
27
27
  @return {Array} A topologically sorted version of the input chunks
28
28
  */
29
- module.exports.dependency = (chunks, chunkGroups) => {
29
+ module.exports.dependency = (chunks, options, compilation) => {
30
+ const chunkGroups = compilation.chunkGroups;
30
31
  if (!chunks) {
31
32
  return chunks;
32
33
  }
@@ -107,7 +108,8 @@ module.exports.none = chunks => chunks;
107
108
  * @param {Array} chunks the chunks to sort
108
109
  * @return {Array} The sorted chunks
109
110
  */
110
- module.exports.manual = (chunks, specifyChunks) => {
111
+ module.exports.manual = (chunks, options) => {
112
+ const specifyChunks = options.chunks;
111
113
  const chunksResult = [];
112
114
  let filterResult = [];
113
115
  if (Array.isArray(specifyChunks)) {
package/lib/loader.js CHANGED
@@ -25,27 +25,11 @@ module.exports = function (source) {
25
25
  //
26
26
  // Get templating options
27
27
  const options = this.query !== '' ? loaderUtils.parseQuery(this.query) : {};
28
- // Webpack 2 does not allow with() statements, which lodash templates use to unwrap
29
- // the parameters passed to the compiled template inside the scope. We therefore
30
- // need to unwrap them ourselves here. This is essentially what lodash does internally
31
- // To tell lodash it should not use with we set a variable
32
28
  const template = _.template(source, _.defaults(options, { variable: 'data' }));
33
- // All templateVariables which should be available
34
- // @see HtmlWebpackPlugin.prototype.executeTemplate
35
- const templateVariables = [
36
- 'compilation',
37
- 'webpack',
38
- 'webpackConfig',
39
- 'htmlWebpackPlugin'
40
- ];
41
- return 'var _ = require(' + loaderUtils.stringifyRequest(this, require.resolve('lodash')) + ');' +
42
- 'module.exports = function (templateParams) {' +
43
- // Declare the template variables in the outer scope of the
44
- // lodash template to unwrap them
45
- templateVariables.map(function (variableName) {
46
- return 'var ' + variableName + ' = templateParams.' + variableName;
47
- }).join(';') + ';' +
29
+ // Require !!lodash - using !! will disable all loaders (e.g. babel)
30
+ return 'var _ = require(' + loaderUtils.stringifyRequest(this, '!!' + require.resolve('lodash')) + ');' +
31
+ 'module.exports = function (templateParams) { with(templateParams) {' +
48
32
  // Execute the lodash template
49
33
  'return (' + template.source + ')();' +
50
- '}';
34
+ '}}';
51
35
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "html-webpack-plugin",
3
- "version": "3.1.0",
3
+ "version": "3.2.0",
4
4
  "license": "MIT",
5
5
  "description": "Simplifies creation of HTML files to serve your webpack bundles",
6
6
  "author": "Charles Blaxland <charles.blaxland@gmail.com> (https://github.com/ampedandwired)",
@@ -12,6 +12,7 @@
12
12
  ],
13
13
  "scripts": {
14
14
  "pretest": "semistandard",
15
+ "commit": "git-cz",
15
16
  "build-examples": "node examples/build-examples.js",
16
17
  "test": "jasmine",
17
18
  "release": "standard-version"
@@ -23,7 +24,9 @@
23
24
  },
24
25
  "devDependencies": {
25
26
  "appcache-webpack-plugin": "^1.3.0",
27
+ "commitizen": "2.9.6",
26
28
  "css-loader": "^0.26.1",
29
+ "cz-conventional-changelog": "2.1.0",
27
30
  "dir-compare": "1.3.0",
28
31
  "es6-promise": "^4.0.5",
29
32
  "extract-text-webpack-plugin": "^1.0.1",
@@ -64,6 +67,11 @@
64
67
  "homepage": "https://github.com/jantimon/html-webpack-plugin",
65
68
  "repository": "https://github.com/jantimon/html-webpack-plugin.git",
66
69
  "engines": {
67
- "node": ">=6.11.5"
70
+ "node": ">=6.9"
71
+ },
72
+ "config": {
73
+ "commitizen": {
74
+ "path": "./node_modules/cz-conventional-changelog"
75
+ }
68
76
  }
69
77
  }