feat: Add default viewport meta tag for default template

BREAKING CHANGE: The default template has now a predefined viewport meta tag fix #897, fix #978
jantimon · Jul 6, 2018 · 8650546 · 8650546
1 parent bbc07a3
commit 8650546
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/examples/default/dist/webpack-4/index.html b/examples/default/dist/webpack-4/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>Webpack App</title>
-  </head>
+  <meta name="viewport" content="width=device-width, initial-scale=1"></head>
   <body>
   <script src="bundle.js"></script></body>
 </html>
diff --git a/examples/favicon/dist/webpack-4/favicon.html b/examples/favicon/dist/webpack-4/favicon.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>HtmlWebpackPlugin example</title>
-  <link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="shortcut icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head>
   <body>
   <script src="bundle.js"></script></body>
 </html>
diff --git a/index.js b/index.js
@@ -31,6 +31,9 @@ class HtmlWebpackPlugin {
    * @param {Partial<HtmlWebpackPluginOptions>} options
    */
   constructor (options) {
+    /** @type {Partial<HtmlWebpackPluginOptions>} */
+    const userOptions = options || {};
+
     // Default options
     /** @type {HtmlWebpackPluginOptions} */
     const defaultOptions = {
@@ -52,8 +55,19 @@ class HtmlWebpackPlugin {
       title: 'Webpack App',
       xhtml: false
     };
+
     /** @type {HtmlWebpackPluginOptions} */
-    this.options = Object.assign(defaultOptions, options);
+    this.options = Object.assign(defaultOptions, userOptions);
+
+    // Default metaOptions if no template is provided
+    if (!userOptions.template && this.options.templateContent === false && this.options.meta) {
+      const defaultMeta = {
+        // From https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
+        viewport: 'width=device-width, initial-scale=1'
+      };
+      this.options.meta = Object.assign({}, this.options.meta, defaultMeta, userOptions.meta);
+    }
+
     // Instance variables to keep caching information
     // for multiple builds
     this.childCompilerHash = undefined;
@@ -506,16 +520,21 @@ class HtmlWebpackPlugin {
     // Make tags self-closing in case of xhtml
     // Turn { "viewport" : "width=500, initial-scale=1" } into
     // [{ name:"viewport" content:"width=500, initial-scale=1" }]
-    const metaTagAttributeObjects = Object.keys(metaOptions).map((metaName) => {
+    const metaTagAttributeObjects = Object.keys(metaOptions)
+    .map((metaName) => {
       const metaTagContent = metaOptions[metaName];
       return (typeof metaTagContent === 'string') ? {
         name: metaName,
         content: metaTagContent
       } : metaTagContent;
-    });
+    })
+    .filter((attribute) => attribute !== false);
     // Turn [{ name:"viewport" content:"width=500, initial-scale=1" }] into
     // the html-webpack-plugin tag structure
     return metaTagAttributeObjects.map((metaTagAttributes) => {
+      if (metaTagAttributes === false) {
+        throw new Error('Invalid meta tag');
+      }
       return {
         tagName: 'meta',
         voidTag: true,

diff --git a/typings.d.ts b/typings.d.ts
@@ -72,7 +72,7 @@ interface HtmlWebpackPluginOptions {
      */
     meta: false // Disable injection
       | {
-          [name: string]: string // name content pair e.g. {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}`
+          [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" }
       },
     /**