Merge pull request #3919 from storybooks/tech/replace-html-webpack-pl…

…ugin

CHANGE html-webpack-plugin for generate-page-plugin

app/angular/src/server/angular-cli_config.js

@@ -80,7 +80,9 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions
   // cliStyleConfig.entry adds global style files to the webpack context
   const entry = {
     ...baseConfig.entry,
-    ...cliStyleConfig.entry,
+    iframe: []
+      .concat(baseConfig.entry.iframe)
+      .concat(Object.values(cliStyleConfig.entry).reduce((acc, item) => acc.concat(item), [])),
   };
 
   const mod = {

app/react-native/package.json

@@ -47,10 +47,11 @@
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "commander": "^2.17.0",
     "dotenv-webpack": "^1.5.7",
+    "ejs": "^2.6.1",
     "express": "^4.16.3",
     "find-cache-dir": "^2.0.0",
+    "generate-page-webpack-plugin": "^1.0.0",
     "global": "^4.3.2",
-    "html-webpack-plugin": "^3.2.0",
     "json5": "^1.0.1",
     "prop-types": "^15.6.2",
     "raw-loader": "^0.5.1",

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

@@ -116,7 +116,7 @@ export default function(configType, baseConfig, projectDir, configDir) {
 
   if (typeof customConfig === 'function') {
     logger.info('=> Loading custom webpack config (full-control mode).');
-    return customConfig(config, configType, defaultConfig);
+    return customConfig(config, configType, defaultConfig, configDir);
   }
 
   logger.info('=> Loading custom webpack config.');

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

@@ -4,54 +4,73 @@ 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 HtmlWebpackPlugin from 'html-webpack-plugin';
-import { indexHtmlPath } from '@storybook/core/server';
-import { version } from '../../../package.json';
+
+import GeneratePagePlugin from 'generate-page-webpack-plugin';
+
+import { getManagerHeadHtml } from '@storybook/core/server';
+
 import { includePaths, excludePaths, nodeModulesPaths } from './utils';
+import { version } from '../../../package.json';
+
+const getConfig = options => {
+  const entriesMeta = {
+    manager: {
+      headHtmlSnippet: getManagerHeadHtml(options.configDir, process.env),
+    },
+  };
 
-const getConfig = options => ({
-  mode: 'development',
-  devtool: '#cheap-module-eval-source-map',
-  entry: {
-    manager: [require.resolve('../../manager')],
-  },
-  output: {
-    path: path.join(__dirname, 'dist'),
-    filename: 'static/[name].bundle.js',
-    publicPath: '/',
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      data: {
-        version,
-      },
-      template: indexHtmlPath,
-    }),
-    new webpack.HotModuleReplacementPlugin(),
-    new CaseSensitivePathsPlugin(),
-    new WatchMissingNodeModulesPlugin(nodeModulesPaths),
-    new webpack.DefinePlugin(getEnvironment().webpack),
-    new Dotenv({ silent: true }),
-    new webpack.DefinePlugin({
-      storybookOptions: JSON.stringify(options),
-    }),
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.jsx?$/,
-        loader: require.resolve('babel-loader'),
-        query: require('./babel.js'), // eslint-disable-line
-        include: includePaths,
-        exclude: excludePaths,
-      },
-      {
-        test: /\.md$/,
-        loader: require.resolve('raw-loader'),
-      },
+  return {
+    mode: 'development',
+    devtool: '#cheap-module-eval-source-map',
+    entry: {
+      manager: [require.resolve('../../manager')],
+    },
+    output: {
+      path: path.join(__dirname, 'dist'),
+      filename: 'static/[name].bundle.js',
+      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 webpack.HotModuleReplacementPlugin(),
+      new CaseSensitivePathsPlugin(),
+      new WatchMissingNodeModulesPlugin(nodeModulesPaths),
+      new webpack.DefinePlugin(getEnvironment().webpack),
+      new Dotenv({ silent: true }),
+      new webpack.DefinePlugin({
+        storybookOptions: JSON.stringify(options),
+      }),
     ],
-  },
-});
+    module: {
+      rules: [
+        {
+          test: /\.jsx?$/,
+          loader: require.resolve('babel-loader'),
+          query: require('./babel.js'), // eslint-disable-line
+          include: includePaths,
+          exclude: excludePaths,
+        },
+        {
+          test: /\.md$/,
+          loader: require.resolve('raw-loader'),
+        },
+      ],
+    },
+  };
+};
 
 export default getConfig;

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

@@ -2,8 +2,9 @@ import path from 'path';
 import webpack from 'webpack';
 import { getEnvironment } from 'universal-dotenv';
 import Dotenv from 'dotenv-webpack';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import { indexHtmlPath } from '@storybook/core/server';
+import GeneratePagePlugin from 'generate-page-webpack-plugin';
+
+import { getManagerHeadHtml } from '@storybook/core/dist/server/utils';
 import { version } from '../../../package.json';
 import { includePaths, excludePaths } from './utils';
 
@@ -26,13 +27,18 @@ const getConfig = options => {
       publicPath: '/',
     },
     plugins: [
-      new HtmlWebpackPlugin({
-        filename: 'index.html',
-        data: {
-          version,
+      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),
         },
-        template: indexHtmlPath,
-      }),
+        {
+          data: { version },
+          headHtmlSnippet: getManagerHeadHtml(options.configDir, process.env),
+        }
+      ),
       new webpack.DefinePlugin({
         'process.env.NODE_ENV': '"production"',
         storybookOptions: JSON.stringify(options),

app/react-native/src/server/middleware.js

@@ -20,7 +20,8 @@ function getMiddleware(configDir) {
   return () => {};
 }
 
-export default function({ projectDir, configDir, ...options }) {
+export default function(options) {
+  const { projectDir, configDir } = options;
   // Build the webpack configuration using the `baseConfig`
   // custom `.babelrc` file and `webpack.config.js` files
   const environment = options.environment || 'DEVELOPMENT';

examples/cra-kitchen-sink/.storybook/config.js

@@ -11,7 +11,7 @@ setOptions({
   sortStoriesByKind: false,
   hierarchySeparator: /\./,
   hierarchyRootSeparator: /\|/,
-  enableShortcuts: false,
+  enableShortcuts: true,
 });
 
 function loadStories() {

lib/core/package.json

@@ -38,12 +38,13 @@
     "core-js": "^2.5.7",
     "css-loader": "^1.0.0",
     "dotenv-webpack": "^1.5.7",
+    "ejs": "^2.6.1",
     "emotion": "^9.2.6",
     "express": "^4.16.3",
     "file-loader": "^1.1.11",
     "find-cache-dir": "^2.0.0",
+    "generate-page-webpack-plugin": "^1.0.0",
     "global": "^4.3.2",
-    "html-webpack-plugin": "^3.2.0",
     "interpret": "^1.1.0",
     "json5": "^1.0.1",
     "postcss-flexbugs-fixes": "^4.1.0",

lib/core/server.js

@@ -4,7 +4,4 @@ const serverUtils = require('./dist/server/utils');
 const buildStatic = require('./dist/server/build-static');
 const buildDev = require('./dist/server/build-dev');
 
-module.exports = assign({}, defaultWebpackConfig, buildStatic, buildDev, serverUtils, {
-  indexHtmlPath: require.resolve('./src/server/index.html.ejs'),
-  iframeHtmlPath: require.resolve('./src/server/iframe.html.ejs'),
-});
+module.exports = assign({}, defaultWebpackConfig, buildStatic, buildDev, serverUtils);

lib/core/src/server/config/utils.js

@@ -37,7 +37,7 @@ export function loadEnv(options = {}) {
 }
 
 export function getEntries(configDir) {
-  const preview = [require.resolve('./polyfills'), require.resolve('./globals')];
+  const iframe = [require.resolve('./polyfills'), require.resolve('./globals')];
   const manager = [require.resolve('./polyfills'), require.resolve('../../client/manager')];
 
   // Check whether a config.{ext} file exists inside the storybook
@@ -47,7 +47,7 @@ export function getEntries(configDir) {
     throw new Error(`=> Create a storybook config file in "${configDir}/config.{ext}".`);
   }
 
-  preview.push(require.resolve(storybookConfigPath));
+  iframe.push(require.resolve(storybookConfigPath));
 
   // Check whether addons.{ext} file exists inside the storybook.
   const storybookCustomAddonsPath = getInterpretedFile(path.resolve(configDir, 'addons'));
@@ -56,5 +56,5 @@ export function getEntries(configDir) {
     manager.unshift(storybookCustomAddonsPath);
   }
 
-  return { preview, manager };
+  return { iframe, manager };
 }

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

@@ -2,12 +2,10 @@ import path from 'path';
 import webpack from 'webpack';
 import { getEnvironment } from 'universal-dotenv';
 import Dotenv from 'dotenv-webpack';
-import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
 import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-
-import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
+import GeneratePagePlugin from 'generate-page-webpack-plugin';
+import { getPreviewHeadHtml, getManagerHeadHtml, getPreviewBodyHtml } from '../utils';
 
 import {
   includePaths,
@@ -21,13 +19,23 @@ import { version } from '../../../package.json';
 
 export default ({ configDir, quiet, babelOptions }) => {
   const entries = getEntries(configDir, true);
+  const entriesMeta = {
+    iframe: {
+      headHtmlSnippet: getPreviewHeadHtml(configDir, process.env),
+      bodyHtmlSnippet: getPreviewBodyHtml(),
+    },
+    manager: {
+      headHtmlSnippet: getManagerHeadHtml(configDir, process.env),
+    },
+  };
+
   return {
     mode: 'development',
     devtool: 'cheap-module-source-map',
     entry: {
       ...entries,
-      preview: [
-        ...entries.preview,
+      iframe: [
+        ...entries.iframe,
         `${require.resolve('webpack-hot-middleware/client')}?reload=true`,
       ],
     },
@@ -42,26 +50,21 @@ export default ({ configDir, quiet, babelOptions }) => {
       publicPath: '',
     },
     plugins: [
-      new HtmlWebpackPlugin({
-        filename: 'index.html',
-        chunks: ['manager'],
-        chunksSortMode: 'none',
-        data: {
-          managerHead: getManagerHeadHtml(configDir),
-          version,
-        },
-        template: require.resolve('../index.html.ejs'),
-      }),
-      new HtmlWebpackPlugin({
-        filename: 'iframe.html',
-        excludeChunks: ['manager'],
-        chunksSortMode: 'none',
-        data: {
-          previewHead: getPreviewHeadHtml(configDir),
+      new GeneratePagePlugin(
+        {
+          template: require.resolve('../templates/index.html.ejs'),
+          // eslint-disable-next-line global-require
+          parser: require('ejs'),
+          filename: entry => (entry === 'manager' ? 'index' : entry),
         },
-        template: require.resolve('../iframe.html.ejs'),
-      }),
-      new InterpolateHtmlPlugin(process.env),
+        {
+          data: { version },
+          headHtmlSnippet: entry =>
+            entriesMeta[entry] ? entriesMeta[entry].headHtmlSnippet : null,
+          bodyHtmlSnippet: entry =>
+            entriesMeta[entry] ? entriesMeta[entry].bodyHtmlSnippet : null,
+        }
+      ),
       new webpack.DefinePlugin(loadEnv()),
       new webpack.HotModuleReplacementPlugin(),
       new CaseSensitivePathsPlugin(),