diff --git a/code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts b/code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts index da843d1cd782..84e0fcdfdac6 100644 --- a/code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts +++ b/code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts @@ -13,6 +13,7 @@ const PLUGIN_NAME = 'WebpackInjectMockerRuntimePlugin'; * Storybook preview bundle, are executed. */ export class WebpackInjectMockerRuntimePlugin { + private cachedRuntime: string | null = null; // We need to lazy-require HtmlWebpackPlugin because it's an optional peer dependency. private getHtmlWebpackPlugin(compiler: Compiler): typeof HtmlWebpackPlugin | null { try { @@ -52,20 +53,23 @@ export class WebpackInjectMockerRuntimePlugin { PLUGIN_NAME, (data, cb) => { try { - const runtimeScriptContent = getMockerRuntime(); + const runtimeScriptContent = + this.cachedRuntime ?? (this.cachedRuntime = getMockerRuntime()); const runtimeAssetName = 'mocker-runtime-injected.js'; // Use the documented `emitAsset` method to add the pre-bundled runtime script // to the compilation's assets. This is the standard Webpack way. - compilation.emitAsset( - runtimeAssetName, - new compiler.webpack.sources.RawSource(runtimeScriptContent) - ); + if (!compilation.getAsset(runtimeAssetName)) { + compilation.emitAsset( + runtimeAssetName, + new compiler.webpack.sources.RawSource(runtimeScriptContent) + ); + data.assets.js.unshift(runtimeAssetName); + } - // Prepend the name of our new asset to the list of JavaScript files. + // Prepend the name of our new asset to the list of JavaScript files, once. // HtmlWebpackPlugin will automatically create a