diff --git a/lib/builder-webpack5/src/preview/virtualModuleModernEntry.js.handlebars b/lib/builder-webpack5/src/preview/virtualModuleModernEntry.js.handlebars
new file mode 100644
index 00000000000..0e11ef12698
--- /dev/null
+++ b/lib/builder-webpack5/src/preview/virtualModuleModernEntry.js.handlebars
@@ -0,0 +1,43 @@
+import { composeConfigs, WebPreview } from '@storybook/web-preview';    
+import { importFn } from './{{storiesFilename}}';
+import { addons } from '@storybook/addons';
+import createChannel from '@storybook/channel-postmessage';
+import fetch from 'unfetch';
+
+const getGlobalAnnotations = () =>
+  composeConfigs([
+    {{#each configs}}
+    require('{{this}}'),
+    {{/each}}
+  ]);
+
+const fetchStoriesList = async () => {
+  const result = await fetch('./stories.json');
+  return result.json();
+}
+
+const channel = createChannel({ page: 'preview' });
+addons.setChannel(channel);
+const preview = new WebPreview({ importFn, getGlobalAnnotations, fetchStoriesList });
+
+window.__STORYBOOK_PREVIEW__ = preview;
+window.__STORYBOOK_STORY_STORE__ = preview.storyStore;
+window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
+
+preview.initialize();
+
+if (module.hot) {
+  module.hot.accept('./{{storiesFilename}}', () => {
+    console.log('configEntry HMR accept storybook-stories.js');
+    console.log(arguments);
+    // importFn has changed so we need to patch the new one in
+    preview.onImportFnChanged({ importFn });
+  });
+
+  module.hot.accept([{{#each configs}}'{{this}}',{{/each}}], () => {
+    console.log('configEntry HMR accept config file');
+    console.log(arguments);
+    // getGlobalAnnotations has changed so we need to patch the new one in
+    preview.onGetGlobalAnnotationsChanged({ getGlobalAnnotations });
+  });
+}