Merge pull request #4375 from storybooks/tech/reapply-html-plugin

CHANGE back to use html-webpack-plugin to keep compatibility with plugins that depend on it

app/react-native/package.json

@@ -52,8 +52,8 @@
     "ejs": "^2.6.1",
     "express": "^4.16.3",
     "find-cache-dir": "^2.0.0",
-    "generate-page-webpack-plugin": "^1.1.1",
     "global": "^4.3.2",
+    "html-webpack-plugin": "^4.0.0-beta.1",
     "json5": "^2.1.0",
     "prop-types": "^15.6.2",
     "raw-loader": "^0.5.1",

app/react-native/src/server/config/webpack.config.js

@@ -4,8 +4,7 @@ import { getEnvironment } from 'universal-dotenv';
 import Dotenv from 'dotenv-webpack';
 import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
-
-import GeneratePagePlugin from 'generate-page-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 import { getManagerHeadHtml } from '@storybook/core/server';
 
@@ -31,21 +30,20 @@ const getConfig = options => {
       publicPath: '/',
     },
     plugins: [
-      new GeneratePagePlugin(
-        {
-          template: require.resolve('@storybook/core/dist/server/templates/index.html.ejs'),
-          // eslint-disable-next-line global-require
-          parser: require('ejs'),
-          filename: entry => (entry === 'manager' ? 'index' : entry),
-        },
-        {
-          data: { version },
-          headHtmlSnippet: entry =>
-            entriesMeta[entry] ? entriesMeta[entry].headHtmlSnippet : null,
-          bodyHtmlSnippet: entry =>
-            entriesMeta[entry] ? entriesMeta[entry].bodyHtmlSnippet : null,
-        }
-      ),
+      new HtmlWebpackPlugin({
+        filename: `index.html`,
+        chunksSortMode: 'none',
+        alwaysWriteToDisk: true,
+        inject: false,
+        templateParameters: (compilation, files, o) => ({
+          compilation,
+          files,
+          options: o,
+          version,
+          ...entriesMeta.manager,
+        }),
+        template: require.resolve(`@storybook/core/src/server/templates/index.ejs`),
+      }),
       new webpack.HotModuleReplacementPlugin(),
       new CaseSensitivePathsPlugin(),
       new WatchMissingNodeModulesPlugin(nodeModulesPaths),

app/react-native/src/server/config/webpack.config.prod.js

@@ -2,13 +2,19 @@ import path from 'path';
 import webpack from 'webpack';
 import { getEnvironment } from 'universal-dotenv';
 import Dotenv from 'dotenv-webpack';
-import GeneratePagePlugin from 'generate-page-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 import { getManagerHeadHtml } from '@storybook/core/dist/server/utils';
 import { version } from '../../../package.json';
 import { includePaths, excludePaths } from './utils';
 
 const getConfig = options => {
+  const entriesMeta = {
+    manager: {
+      headHtmlSnippet: getManagerHeadHtml(options.configDir, process.env),
+    },
+  };
+
   const config = {
     mode: 'production',
     bail: true,
@@ -27,18 +33,20 @@ const getConfig = options => {
       publicPath: '/',
     },
     plugins: [
-      new GeneratePagePlugin(
-        {
-          template: require.resolve('@storybook/core/dist/server/templates/index.html.ejs'),
-          // eslint-disable-next-line global-require
-          parser: require('ejs'),
-          filename: entry => (entry === 'manager' ? 'index' : entry),
-        },
-        {
-          data: { version },
-          headHtmlSnippet: getManagerHeadHtml(options.configDir, process.env),
-        }
-      ),
+      new HtmlWebpackPlugin({
+        filename: `index.html`,
+        chunksSortMode: 'none',
+        alwaysWriteToDisk: true,
+        inject: false,
+        templateParameters: (compilation, files, o) => ({
+          compilation,
+          files,
+          options: o,
+          version,
+          ...entriesMeta.manager,
+        }),
+        template: require.resolve(`@storybook/core/src/server/templates/index.ejs`),
+      }),
       new webpack.DefinePlugin({
         'process.env.NODE_ENV': '"production"',
         storybookOptions: JSON.stringify(options),

examples/polymer-cli/package.json

@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "copy-webpack-plugin": "^4.5.3",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^4.0.0-beta.1",
     "webpack-dev-server": "^3.1.9"
   }
 }

lib/cli/test/fixtures/sfc_vue/package.json

@@ -31,7 +31,7 @@
     "extract-text-webpack-plugin": "^2.0.0",
     "file-loader": "^0.11.1",
     "friendly-errors-webpack-plugin": "^1.1.3",
-    "html-webpack-plugin": "^2.28.0",
+    "html-webpack-plugin": "^4.0.0-beta.1",
     "http-proxy-middleware": "^0.17.3",
     "opn": "^5.1.0",
     "optimize-css-assets-webpack-plugin": "^2.0.0",

lib/core/package.json

@@ -52,8 +52,8 @@
     "express": "^4.16.3",
     "file-loader": "^2.0.0",
     "find-cache-dir": "^2.0.0",
-    "generate-page-webpack-plugin": "^1.1.1",
     "global": "^4.3.2",
+    "html-webpack-plugin": "^4.0.0-beta.1",
     "inquirer": "^6.2.0",
     "interpret": "^1.1.0",
     "ip": "^1.1.5",

lib/core/src/server/config/webpack.config.dev.js

@@ -4,7 +4,8 @@ import { getEnvironment } from 'universal-dotenv';
 import Dotenv from 'dotenv-webpack';
 import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
-import GeneratePagePlugin from 'generate-page-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+
 import {
   includePaths,
   excludePaths,
@@ -42,20 +43,23 @@ export default ({ configDir, quiet, babelOptions, entries }) => {
       publicPath: '',
     },
     plugins: [
-      new GeneratePagePlugin(
-        {
-          template: require.resolve('../templates/index.html.ejs'),
-          // eslint-disable-next-line global-require
-          parser: require('ejs'),
-          filename: entry => (entry === 'manager' ? 'index' : entry),
-        },
-        {
-          data: { version },
-          headHtmlSnippet: entry =>
-            entriesMeta[entry] ? entriesMeta[entry].headHtmlSnippet : null,
-          bodyHtmlSnippet: entry =>
-            entriesMeta[entry] ? entriesMeta[entry].bodyHtmlSnippet : null,
-        }
+      ...Object.keys(entries).map(
+        e =>
+          new HtmlWebpackPlugin({
+            filename: `${e === 'manager' ? 'index' : e}.html`,
+            excludeChunks: Object.keys(entries).filter(i => i !== e),
+            chunksSortMode: 'none',
+            alwaysWriteToDisk: true,
+            inject: false,
+            templateParameters: (compilation, files, options) => ({
+              compilation,
+              files,
+              options,
+              version,
+              ...entriesMeta[e],
+            }),
+            template: require.resolve(`../templates/index.ejs`),
+          })
       ),
       new webpack.DefinePlugin(loadEnv()),
       new webpack.HotModuleReplacementPlugin(),

lib/core/src/server/config/webpack.config.prod.js

@@ -1,7 +1,8 @@
 import webpack from 'webpack';
 import { getEnvironment } from 'universal-dotenv';
 import Dotenv from 'dotenv-webpack';
-import GeneratePagePlugin from 'generate-page-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+
 import { version } from '../../../package.json';
 import { includePaths, excludePaths, loadEnv, nodePaths, getBabelRuntimePath } from './utils';
 import { getPreviewHeadHtml, getManagerHeadHtml, getPreviewBodyHtml } from '../utils';
@@ -32,20 +33,23 @@ export default ({ configDir, babelOptions, entries }) => {
       publicPath: '',
     },
     plugins: [
-      new GeneratePagePlugin(
-        {
-          template: require.resolve('../templates/index.html.ejs'),
-          // eslint-disable-next-line global-require
-          parser: require('ejs'),
-          filename: entry => (entry === 'manager' ? 'index' : entry),
-        },
-        {
-          data: { version },
-          headHtmlSnippet: entry =>
-            entriesMeta[entry] ? entriesMeta[entry].headHtmlSnippet : null,
-          bodyHtmlSnippet: entry =>
-            entriesMeta[entry] ? entriesMeta[entry].bodyHtmlSnippet : null,
-        }
+      ...Object.keys(entries).map(
+        e =>
+          new HtmlWebpackPlugin({
+            filename: `${e === 'manager' ? 'index' : e}.html`,
+            excludeChunks: Object.keys(entries).filter(i => i !== e),
+            chunksSortMode: 'none',
+            alwaysWriteToDisk: true,
+            inject: false,
+            templateParameters: (compilation, files, options) => ({
+              compilation,
+              files,
+              options,
+              version,
+              ...entriesMeta[e],
+            }),
+            template: require.resolve(`../templates/index.ejs`),
+          })
       ),
       new webpack.DefinePlugin(loadEnv({ production: true })),
       new webpack.DefinePlugin(getEnvironment().webpack),

lib/core/src/server/templates/index.ejs

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title><%= options.title || 'Storybook'%></title>
+
+  <% if (files.favicon) { %>
+    <link rel="shortcut icon" href="<%= files.favicon%>">
+  <% } %>
+
+  <% if (options.mobile) { %>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <% } %>
+
+  <% if (typeof headHtmlSnippet !== 'undefined') { %>
+    <%= headHtmlSnippet %>
+  <% } %>
+
+  <% files.css.forEach(file => { %>
+    <link href="<%= file %>" rel="stylesheet">
+  <% }); %>
+
+</head>
+<body>
+
+<% if (typeof bodyHtmlSnippet !== 'undefined') { %>
+  <%= bodyHtmlSnippet %>
+<% } %>
+
+<div id="root"></div>
+
+<% if (options.window) { %>
+<script>
+  <% for (var varName in options.window) { %>
+    window['<%=varName%>'] = <%= JSON.stringify(options.window[varName]) %>;
+  <% } %>
+</script>
+<% } %>
+
+<% files.js.forEach(file => { %>
+  <script src="<%= file %>"></script>
+<% }); %>
+
+</body>
+</html>