What is @storybook/source-loader?
The @storybook/source-loader package is a loader for webpack that allows you to load the source code of a story into Storybook. This enables you to display the source code in a live code editor or snippet for documentation purposes, which can be helpful for developers to understand how to use a component. It is part of the Storybook ecosystem, which is a tool for developing UI components in isolation for React, Vue, Angular, and more.
Load story source code
This webpack configuration snippet shows how to include the @storybook/source-loader as a pre-loader for files that match the `.stories.js` or `.stories.jsx` pattern. This allows Storybook to display the source code of these stories.
module.exports = {
module: {
rules: [
{
test: /\.stories\.jsx?$/,
loaders: [require.resolve('@storybook/source-loader')],
enforce: 'pre',
},
],
},
};