@storybook/builder-webpack5 6.4.0-alpha.4 → 6.4.0-alpha.40

package/dist/cjs/index.js

@@ -38,13 +38,9 @@ var getConfig = async function (options) {
   var babelOptions = await presets.apply('babel', {}, _objectSpread(_objectSpread({}, options), {}, {
     typescriptOptions: typescriptOptions
   }));
-  var entries = await presets.apply('entries', [], options);
-  var stories = await presets.apply('stories', [], options);
   var frameworkOptions = await presets.apply(`${options.framework}Options`, {}, options);
   return presets.apply('webpack', {}, _objectSpread(_objectSpread({}, options), {}, {
     babelOptions: babelOptions,
-    entries: entries,
-    stories: stories,
     typescriptOptions: typescriptOptions,
     [`${options.framework}Options`]: frameworkOptions
   }));
@@ -168,7 +164,8 @@ var build = async function ({
 
   var config = await getConfig(options);
   return new Promise(function (succeed, fail) {
-    webpackInstance(config).run(function (error, stats) {
+    var compiler = webpackInstance(config);
+    compiler.run(function (error, stats) {
       if (error || !stats || stats.hasErrors()) {
         _nodeLogger.logger.error('=> Failed to build the preview');
 
@@ -177,7 +174,10 @@ var build = async function ({
         if (error) {
           _nodeLogger.logger.error(error.message);
 
-          return fail(error);
+          compiler.close(function () {
+            return fail(error);
+          });
+          return;
         }
 
         if (stats && (stats.hasErrors() || stats.hasWarnings())) {
@@ -196,7 +196,10 @@ var build = async function ({
           warnings.forEach(function (e) {
             return _nodeLogger.logger.error(e.message);
           });
-          return fail(stats);
+          compiler.close(function () {
+            return fail(stats);
+          });
+          return;
         }
       }
 
@@ -211,9 +214,17 @@ var build = async function ({
         }).warnings.forEach(function (e) {
           return _nodeLogger.logger.warn(e.message);
         });
-      }
+      } // https://webpack.js.org/api/node/#run
+      // #15227
+
 
-      return succeed(stats);
+      compiler.close(function (closeErr) {
+        if (closeErr) {
+          return fail(closeErr);
+        }
+
+        return succeed(stats);
+      });
     });
   });
 };

package/dist/cjs/presets/preview-preset.js

@@ -9,8 +9,6 @@ require("core-js/modules/es.promise.js");
 
 var _iframeWebpack = _interopRequireDefault(require("../preview/iframe-webpack.config"));
 
-var _entries = require("../preview/entries");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var webpack = async function (_, options) {
@@ -21,7 +19,7 @@ exports.webpack = webpack;
 
 var entries = async function (_, options) {
   var result = [];
-  result = result.concat(await (0, _entries.createPreviewEntry)(options));
+  result = result.concat(await options.presets.apply('previewEntries', [], options));
 
   if (options.configType === 'DEVELOPMENT') {
     // Suppress informational messages when --quiet is specified. webpack-hot-middleware's quiet

package/dist/cjs/preview/base-webpack.config.js

@@ -55,7 +55,7 @@ async function createDefaultWebpackConfig(storybookBaseConfig, options) {
         test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
         type: 'asset/resource',
         generator: {
-          filename: isProd ? 'static/media/[name].[contenthash:8].[ext]' : 'static/media/[path][name].[ext]'
+          filename: isProd ? 'static/media/[name].[contenthash:8][ext]' : 'static/media/[path][name][ext]'
         }
       }, {
         test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
@@ -66,7 +66,7 @@ async function createDefaultWebpackConfig(storybookBaseConfig, options) {
           }
         },
         generator: {
-          filename: isProd ? 'static/media/[name].[contenthash:8].[ext]' : 'static/media/[path][name].[ext]'
+          filename: isProd ? 'static/media/[name].[contenthash:8][ext]' : 'static/media/[path][name][ext]'
         }
       }]
     }),

package/dist/cjs/preview/iframe-webpack.config.js

@@ -9,8 +9,6 @@ require("core-js/modules/es.promise.js");
 
 var _path = _interopRequireDefault(require("path"));
 
-var _fsExtra = _interopRequireDefault(require("fs-extra"));
-
 var _webpack = require("webpack");
 
 var _dotenvWebpack = _interopRequireDefault(require("dotenv-webpack"));
@@ -49,22 +47,20 @@ var storybookPaths = ['addons', 'api', 'channels', 'channel-postmessage', 'compo
   });
 }, {});
 
-var _default = async function _default({
-  configDir: configDir,
-  babelOptions: babelOptions,
-  entries: entries,
-  stories: stories,
-  outputDir = _path.default.join('.', 'public'),
-  quiet: quiet,
-  packageJson: packageJson,
-  configType: configType,
-  framework: framework,
-  frameworkPath: frameworkPath,
-  presets: presets,
-  typescriptOptions: typescriptOptions,
-  modern: modern,
-  features: features
-}) {
+var _default = async function _default(options) {
+  var configDir = options.configDir,
+      babelOptions = options.babelOptions,
+      _options$outputDir = options.outputDir,
+      outputDir = _options$outputDir === void 0 ? _path.default.join('.', 'public') : _options$outputDir,
+      quiet = options.quiet,
+      packageJson = options.packageJson,
+      configType = options.configType,
+      framework = options.framework,
+      frameworkPath = options.frameworkPath,
+      presets = options.presets,
+      typescriptOptions = options.typescriptOptions,
+      modern = options.modern,
+      features = options.features;
   var envs = await presets.apply('env');
   var logLevel = await presets.apply('logLevel', undefined);
   var frameworkOptions = await presets.apply(`${framework}Options`, {});
@@ -72,46 +68,60 @@ var _default = async function _default({
   var bodyHtmlSnippet = await presets.apply('previewBody');
   var template = await presets.apply('previewMainTemplate');
   var babelLoader = (0, _babelLoaderPreview.createBabelLoader)(babelOptions, framework);
-  var isProd = configType === 'PRODUCTION'; // TODO FIX ME - does this need to be ESM?
-
-  var entryTemplate = await _fsExtra.default.readFile(_path.default.join(__dirname, 'virtualModuleEntry.template.js'), {
-    encoding: 'utf8'
-  });
-  var storyTemplate = await _fsExtra.default.readFile(_path.default.join(__dirname, 'virtualModuleStory.template.js'), {
-    encoding: 'utf8'
+  var isProd = configType === 'PRODUCTION';
+  var configs = [...(await presets.apply('config', [], options)), (0, _coreCommon.loadPreviewOrConfigFile)(options)].filter(Boolean);
+  var entries = await presets.apply('entries', [], options);
+  var stories = (0, _coreCommon.normalizeStories)(await presets.apply('stories', [], options), {
+    configDir: options.configDir,
+    workingDir: process.cwd()
   });
+  var virtualModuleMapping = {};
 
-  var frameworkInitEntry = _path.default.resolve(_path.default.join(configDir, 'storybook-init-framework-entry.js')); // Allows for custom frameworks that are not published under the @storybook namespace
+  if (features !== null && features !== void 0 && features.storyStoreV7) {
+    var storiesFilename = 'storybook-stories.js';
 
+    var storiesPath = _path.default.resolve(_path.default.join(configDir, storiesFilename));
 
-  var frameworkImportPath = frameworkPath || `@storybook/${framework}`;
-  var virtualModuleMapping = {
-    // Ensure that the client API is initialized by the framework before any other iframe code
-    // is loaded. That way our client-apis can assume the existence of the API+store
-    [frameworkInitEntry]: `import '${frameworkImportPath}';`
-  };
-  entries.forEach(function (entryFilename) {
-    var match = entryFilename.match(/(.*)-generated-(config|other)-entry.js$/);
+    virtualModuleMapping[storiesPath] = (0, _coreCommon.toImportFn)(stories);
+
+    var configEntryPath = _path.default.resolve(_path.default.join(configDir, 'storybook-config-entry.js'));
 
-    if (match) {
-      var configFilename = match[1];
+    virtualModuleMapping[configEntryPath] = (0, _coreCommon.handlebars)(await (0, _coreCommon.readTemplate)(_path.default.join(__dirname, 'virtualModuleModernEntry.js.handlebars')), {
+      storiesFilename: storiesFilename,
+      configs: configs
+    });
+    entries.push(configEntryPath);
+  } else {
+    var frameworkInitEntry = _path.default.resolve(_path.default.join(configDir, 'storybook-init-framework-entry.js'));
+
+    var frameworkImportPath = frameworkPath || `@storybook/${framework}`;
+    virtualModuleMapping[frameworkInitEntry] = `import '${frameworkImportPath}';`;
+    entries.push(frameworkInitEntry);
+    var entryTemplate = await (0, _coreCommon.readTemplate)(_path.default.join(__dirname, 'virtualModuleEntry.template.js'));
+    configs.forEach(function (configFilename) {
       var clientApi = storybookPaths['@storybook/client-api'];
       var clientLogger = storybookPaths['@storybook/client-logger'];
-      virtualModuleMapping[entryFilename] = (0, _coreCommon.interpolate)(entryTemplate, {
+      virtualModuleMapping[`${configFilename}-generated-config-entry.js`] = (0, _coreCommon.interpolate)(entryTemplate, {
         configFilename: configFilename,
         clientApi: clientApi,
         clientLogger: clientLogger
       });
-    }
-  });
+      entries.push(`${configFilename}-generated-config-entry.js`);
+    });
 
-  if (stories) {
-    var storiesFilename = _path.default.resolve(_path.default.join(configDir, `generated-stories-entry.js`));
+    if (stories.length > 0) {
+      var storyTemplate = await (0, _coreCommon.readTemplate)(_path.default.join(__dirname, 'virtualModuleStory.template.js'));
 
-    virtualModuleMapping[storiesFilename] = (0, _coreCommon.interpolate)(storyTemplate, {
-      frameworkImportPath: frameworkImportPath
-    }) // Make sure we also replace quotes for this one
-    .replace("'{{stories}}'", stories.map(_coreCommon.toRequireContextString).join(','));
+      var _storiesFilename = _path.default.resolve(_path.default.join(configDir, `generated-stories-entry.js`));
+
+      virtualModuleMapping[_storiesFilename] = (0, _coreCommon.interpolate)(storyTemplate, {
+        frameworkImportPath: frameworkImportPath
+      }) // Make sure we also replace quotes for this one
+      .replace("'{{stories}}'", stories.map(function (s) {
+        return s.glob;
+      }).map(_coreCommon.toRequireContextString).join(','));
+      entries.push(_storiesFilename);
+    }
   }
 
   var shouldCheckTs = (0, _useBaseTsSupport.useBaseTsSupport)(framework) && typescriptOptions.check;
@@ -132,7 +142,6 @@ var _default = async function _default({
       logging: 'error'
     },
     watchOptions: {
-      aggregateTimeout: 10,
       ignored: /node_modules/
     },
     ignoreWarnings: [{
@@ -144,16 +153,17 @@ var _default = async function _default({
       chunksSortMode: 'none',
       alwaysWriteToDisk: true,
       inject: false,
-      templateParameters: function (compilation, files, options) {
+      templateParameters: function (compilation, files, templateOptions) {
         return {
           compilation: compilation,
           files: files,
-          options: options,
+          options: templateOptions,
           version: packageJson.version,
           globals: {
             LOGLEVEL: logLevel,
             FRAMEWORK_OPTIONS: frameworkOptions,
-            FEATURES: features
+            FEATURES: features,
+            STORIES: stories
           },
           headHtmlSnippet: headHtmlSnippet,
           bodyHtmlSnippet: bodyHtmlSnippet
@@ -168,10 +178,9 @@ var _default = async function _default({
         useShortDoctype: true
       },
       template: template
-    }), new _webpack.DefinePlugin({
-      'process.env': (0, _coreCommon.stringifyEnvs)(envs),
+    }), new _webpack.DefinePlugin(_objectSpread(_objectSpread({}, (0, _coreCommon.stringifyProcessEnvs)(envs)), {}, {
       NODE_ENV: JSON.stringify(process.env.NODE_ENV)
-    }), isProd ? null : new _WatchMissingNodeModulesPlugin.default(_coreCommon.nodeModulesPaths), isProd ? null : new _webpack.HotModuleReplacementPlugin(), new _caseSensitivePathsWebpackPlugin.default(), quiet ? null : new _webpack.ProgressPlugin({}), (0, _coreCommon.hasDotenv)() ? new _dotenvWebpack.default({
+    })), isProd ? null : new _WatchMissingNodeModulesPlugin.default(_coreCommon.nodeModulesPaths), isProd ? null : new _webpack.HotModuleReplacementPlugin(), new _caseSensitivePathsWebpackPlugin.default(), quiet ? null : new _webpack.ProgressPlugin({}), (0, _coreCommon.hasDotenv)() ? new _dotenvWebpack.default({
       silent: true
     }) : null, shouldCheckTs ? new _forkTsCheckerWebpackPlugin.default(tsCheckOptions) : null].filter(Boolean),
     module: {
@@ -199,6 +208,7 @@ var _default = async function _default({
       runtimeChunk: true,
       sideEffects: true,
       usedExports: true,
+      moduleIds: 'named',
       minimizer: isProd ? [new _terserWebpackPlugin.default({
         parallel: true,
         terserOptions: {

package/dist/cjs/preview/virtualModuleModernEntry.js.handlebars

@@ -0,0 +1,44 @@
+import fetch from 'unfetch';
+
+import { composeConfigs, PreviewWeb } from '@storybook/preview-web';    
+import { ClientApi } from '@storybook/client-api';    
+import { addons } from '@storybook/addons';
+import createChannel from '@storybook/channel-postmessage';
+
+import { importFn } from './{{storiesFilename}}';
+
+const getProjectAnnotations = () =>
+  composeConfigs([
+    {{#each configs}}
+    require('{{this}}'),
+    {{/each}}
+  ]);
+
+const fetchStoryIndex = async () => {
+  const result = await fetch('./stories.json');
+  return result.json();
+}
+
+const channel = createChannel({ page: 'preview' });
+addons.setChannel(channel);
+
+const preview = new PreviewWeb({ importFn, fetchStoryIndex });
+
+window.__STORYBOOK_PREVIEW__ = preview;
+window.__STORYBOOK_STORY_STORE__ = preview.storyStore;
+window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
+window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore });
+
+preview.initialize({ getProjectAnnotations });
+
+if (module.hot) {
+  module.hot.accept('./{{storiesFilename}}', () => {
+    // importFn has changed so we need to patch the new one in
+    preview.onImportFnChanged({ importFn });
+  });
+
+  module.hot.accept([{{#each configs}}'{{this}}',{{/each}}], () => {
+    // getProjectAnnotations has changed so we need to patch the new one in
+    preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
+  });
+}

package/dist/esm/index.js

@@ -18,13 +18,9 @@ export var getConfig = async function (options) {
   var babelOptions = await presets.apply('babel', {}, _objectSpread(_objectSpread({}, options), {}, {
     typescriptOptions: typescriptOptions
   }));
-  var entries = await presets.apply('entries', [], options);
-  var stories = await presets.apply('stories', [], options);
   var frameworkOptions = await presets.apply(`${options.framework}Options`, {}, options);
   return presets.apply('webpack', {}, _objectSpread(_objectSpread({}, options), {}, {
     babelOptions: babelOptions,
-    entries: entries,
-    stories: stories,
     typescriptOptions: typescriptOptions,
     [`${options.framework}Options`]: frameworkOptions
   }));
@@ -133,14 +129,18 @@ export var build = async function ({
   logger.info('=> Compiling preview..');
   var config = await getConfig(options);
   return new Promise(function (succeed, fail) {
-    webpackInstance(config).run(function (error, stats) {
+    var compiler = webpackInstance(config);
+    compiler.run(function (error, stats) {
       if (error || !stats || stats.hasErrors()) {
         logger.error('=> Failed to build the preview');
         process.exitCode = 1;
 
         if (error) {
           logger.error(error.message);
-          return fail(error);
+          compiler.close(function () {
+            return fail(error);
+          });
+          return;
         }
 
         if (stats && (stats.hasErrors() || stats.hasWarnings())) {
@@ -159,7 +159,10 @@ export var build = async function ({
           warnings.forEach(function (e) {
             return logger.error(e.message);
           });
-          return fail(stats);
+          compiler.close(function () {
+            return fail(stats);
+          });
+          return;
         }
       }
 
@@ -174,9 +177,17 @@ export var build = async function ({
         }).warnings.forEach(function (e) {
           return logger.warn(e.message);
         });
-      }
+      } // https://webpack.js.org/api/node/#run
+      // #15227
+
 
-      return succeed(stats);
+      compiler.close(function (closeErr) {
+        if (closeErr) {
+          return fail(closeErr);
+        }
+
+        return succeed(stats);
+      });
     });
   });
 };

package/dist/esm/presets/preview-preset.js

@@ -1,12 +1,11 @@
 import "core-js/modules/es.promise.js";
 import webpackConfig from '../preview/iframe-webpack.config';
-import { createPreviewEntry } from '../preview/entries';
 export var webpack = async function (_, options) {
   return webpackConfig(options);
 };
 export var entries = async function (_, options) {
   var result = [];
-  result = result.concat(await createPreviewEntry(options));
+  result = result.concat(await options.presets.apply('previewEntries', [], options));
 
   if (options.configType === 'DEVELOPMENT') {
     // Suppress informational messages when --quiet is specified. webpack-hot-middleware's quiet

package/dist/esm/preview/base-webpack.config.js

@@ -45,7 +45,7 @@ export async function createDefaultWebpackConfig(storybookBaseConfig, options) {
         test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
         type: 'asset/resource',
         generator: {
-          filename: isProd ? 'static/media/[name].[contenthash:8].[ext]' : 'static/media/[path][name].[ext]'
+          filename: isProd ? 'static/media/[name].[contenthash:8][ext]' : 'static/media/[path][name][ext]'
         }
       }, {
         test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
@@ -56,7 +56,7 @@ export async function createDefaultWebpackConfig(storybookBaseConfig, options) {
           }
         },
         generator: {
-          filename: isProd ? 'static/media/[name].[contenthash:8].[ext]' : 'static/media/[path][name].[ext]'
+          filename: isProd ? 'static/media/[name].[contenthash:8][ext]' : 'static/media/[path][name][ext]'
         }
       }]
     }),

package/dist/esm/preview/iframe-webpack.config.js

@@ -7,7 +7,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import path from 'path';
-import fse from 'fs-extra';
 import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin } from 'webpack';
 import Dotenv from 'dotenv-webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
@@ -17,7 +16,7 @@ import TerserWebpackPlugin from 'terser-webpack-plugin';
 import VirtualModulePlugin from 'webpack-virtual-modules';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import themingPaths from '@storybook/theming/paths';
-import { toRequireContextString, es6Transpiler, stringifyEnvs, nodeModulesPaths, interpolate, hasDotenv } from '@storybook/core-common';
+import { toRequireContextString, es6Transpiler, stringifyProcessEnvs, nodeModulesPaths, handlebars, interpolate, hasDotenv, toImportFn, normalizeStories, readTemplate, loadPreviewOrConfigFile } from '@storybook/core-common';
 import { createBabelLoader } from './babel-loader-preview';
 import { useBaseTsSupport } from './useBaseTsSupport';
 var storybookPaths = ['addons', 'api', 'channels', 'channel-postmessage', 'components', 'core-events', 'router', 'theming', 'semver', 'client-api', 'client-logger'].reduce(function (acc, sbPackage) {
@@ -25,22 +24,20 @@ var storybookPaths = ['addons', 'api', 'channels', 'channel-postmessage', 'compo
     [`@storybook/${sbPackage}`]: path.dirname(require.resolve(`@storybook/${sbPackage}/package.json`))
   });
 }, {});
-export default (async function ({
-  configDir: configDir,
-  babelOptions: babelOptions,
-  entries: entries,
-  stories: stories,
-  outputDir = path.join('.', 'public'),
-  quiet: quiet,
-  packageJson: packageJson,
-  configType: configType,
-  framework: framework,
-  frameworkPath: frameworkPath,
-  presets: presets,
-  typescriptOptions: typescriptOptions,
-  modern: modern,
-  features: features
-}) {
+export default (async function (options) {
+  var configDir = options.configDir,
+      babelOptions = options.babelOptions,
+      _options$outputDir = options.outputDir,
+      outputDir = _options$outputDir === void 0 ? path.join('.', 'public') : _options$outputDir,
+      quiet = options.quiet,
+      packageJson = options.packageJson,
+      configType = options.configType,
+      framework = options.framework,
+      frameworkPath = options.frameworkPath,
+      presets = options.presets,
+      typescriptOptions = options.typescriptOptions,
+      modern = options.modern,
+      features = options.features;
   var envs = await presets.apply('env');
   var logLevel = await presets.apply('logLevel', undefined);
   var frameworkOptions = await presets.apply(`${framework}Options`, {});
@@ -48,43 +45,55 @@ export default (async function ({
   var bodyHtmlSnippet = await presets.apply('previewBody');
   var template = await presets.apply('previewMainTemplate');
   var babelLoader = createBabelLoader(babelOptions, framework);
-  var isProd = configType === 'PRODUCTION'; // TODO FIX ME - does this need to be ESM?
-
-  var entryTemplate = await fse.readFile(path.join(__dirname, 'virtualModuleEntry.template.js'), {
-    encoding: 'utf8'
-  });
-  var storyTemplate = await fse.readFile(path.join(__dirname, 'virtualModuleStory.template.js'), {
-    encoding: 'utf8'
+  var isProd = configType === 'PRODUCTION';
+  var configs = [...(await presets.apply('config', [], options)), loadPreviewOrConfigFile(options)].filter(Boolean);
+  var entries = await presets.apply('entries', [], options);
+  var stories = normalizeStories(await presets.apply('stories', [], options), {
+    configDir: options.configDir,
+    workingDir: process.cwd()
   });
-  var frameworkInitEntry = path.resolve(path.join(configDir, 'storybook-init-framework-entry.js')); // Allows for custom frameworks that are not published under the @storybook namespace
+  var virtualModuleMapping = {};
 
-  var frameworkImportPath = frameworkPath || `@storybook/${framework}`;
-  var virtualModuleMapping = {
-    // Ensure that the client API is initialized by the framework before any other iframe code
-    // is loaded. That way our client-apis can assume the existence of the API+store
-    [frameworkInitEntry]: `import '${frameworkImportPath}';`
-  };
-  entries.forEach(function (entryFilename) {
-    var match = entryFilename.match(/(.*)-generated-(config|other)-entry.js$/);
-
-    if (match) {
-      var configFilename = match[1];
+  if (features !== null && features !== void 0 && features.storyStoreV7) {
+    var storiesFilename = 'storybook-stories.js';
+    var storiesPath = path.resolve(path.join(configDir, storiesFilename));
+    virtualModuleMapping[storiesPath] = toImportFn(stories);
+    var configEntryPath = path.resolve(path.join(configDir, 'storybook-config-entry.js'));
+    virtualModuleMapping[configEntryPath] = handlebars(await readTemplate(path.join(__dirname, 'virtualModuleModernEntry.js.handlebars')), {
+      storiesFilename: storiesFilename,
+      configs: configs
+    });
+    entries.push(configEntryPath);
+  } else {
+    var frameworkInitEntry = path.resolve(path.join(configDir, 'storybook-init-framework-entry.js'));
+    var frameworkImportPath = frameworkPath || `@storybook/${framework}`;
+    virtualModuleMapping[frameworkInitEntry] = `import '${frameworkImportPath}';`;
+    entries.push(frameworkInitEntry);
+    var entryTemplate = await readTemplate(path.join(__dirname, 'virtualModuleEntry.template.js'));
+    configs.forEach(function (configFilename) {
       var clientApi = storybookPaths['@storybook/client-api'];
       var clientLogger = storybookPaths['@storybook/client-logger'];
-      virtualModuleMapping[entryFilename] = interpolate(entryTemplate, {
+      virtualModuleMapping[`${configFilename}-generated-config-entry.js`] = interpolate(entryTemplate, {
         configFilename: configFilename,
         clientApi: clientApi,
         clientLogger: clientLogger
       });
-    }
-  });
+      entries.push(`${configFilename}-generated-config-entry.js`);
+    });
+
+    if (stories.length > 0) {
+      var storyTemplate = await readTemplate(path.join(__dirname, 'virtualModuleStory.template.js'));
 
-  if (stories) {
-    var storiesFilename = path.resolve(path.join(configDir, `generated-stories-entry.js`));
-    virtualModuleMapping[storiesFilename] = interpolate(storyTemplate, {
-      frameworkImportPath: frameworkImportPath
-    }) // Make sure we also replace quotes for this one
-    .replace("'{{stories}}'", stories.map(toRequireContextString).join(','));
+      var _storiesFilename = path.resolve(path.join(configDir, `generated-stories-entry.js`));
+
+      virtualModuleMapping[_storiesFilename] = interpolate(storyTemplate, {
+        frameworkImportPath: frameworkImportPath
+      }) // Make sure we also replace quotes for this one
+      .replace("'{{stories}}'", stories.map(function (s) {
+        return s.glob;
+      }).map(toRequireContextString).join(','));
+      entries.push(_storiesFilename);
+    }
   }
 
   var shouldCheckTs = useBaseTsSupport(framework) && typescriptOptions.check;
@@ -105,7 +114,6 @@ export default (async function ({
       logging: 'error'
     },
     watchOptions: {
-      aggregateTimeout: 10,
       ignored: /node_modules/
     },
     ignoreWarnings: [{
@@ -117,16 +125,17 @@ export default (async function ({
       chunksSortMode: 'none',
       alwaysWriteToDisk: true,
       inject: false,
-      templateParameters: function (compilation, files, options) {
+      templateParameters: function (compilation, files, templateOptions) {
         return {
           compilation: compilation,
           files: files,
-          options: options,
+          options: templateOptions,
           version: packageJson.version,
           globals: {
             LOGLEVEL: logLevel,
             FRAMEWORK_OPTIONS: frameworkOptions,
-            FEATURES: features
+            FEATURES: features,
+            STORIES: stories
           },
           headHtmlSnippet: headHtmlSnippet,
           bodyHtmlSnippet: bodyHtmlSnippet
@@ -141,10 +150,9 @@ export default (async function ({
         useShortDoctype: true
       },
       template: template
-    }), new DefinePlugin({
-      'process.env': stringifyEnvs(envs),
+    }), new DefinePlugin(_objectSpread(_objectSpread({}, stringifyProcessEnvs(envs)), {}, {
       NODE_ENV: JSON.stringify(process.env.NODE_ENV)
-    }), isProd ? null : new WatchMissingNodeModulesPlugin(nodeModulesPaths), isProd ? null : new HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), quiet ? null : new ProgressPlugin({}), hasDotenv() ? new Dotenv({
+    })), isProd ? null : new WatchMissingNodeModulesPlugin(nodeModulesPaths), isProd ? null : new HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), quiet ? null : new ProgressPlugin({}), hasDotenv() ? new Dotenv({
       silent: true
     }) : null, shouldCheckTs ? new ForkTsCheckerWebpackPlugin(tsCheckOptions) : null].filter(Boolean),
     module: {
@@ -172,6 +180,7 @@ export default (async function ({
       runtimeChunk: true,
       sideEffects: true,
       usedExports: true,
+      moduleIds: 'named',
       minimizer: isProd ? [new TerserWebpackPlugin({
         parallel: true,
         terserOptions: {