storybook webpack config

.js

const path = require('path');
const TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

// --- Full control mode ---
module.exports = async ({ config }) => {
  config.module.rules.push({
    test: /\.stories\.tsx?$/,
    loaders: [
      {
        loader: require.resolve('@storybook/addon-storysource/loader'),
        options: {
          parser: 'typescript',
          prettierConfig: {
            printWidth: 100,
            singleQuote: true
          }
        }
      }
    ],
    enforce: 'pre'
  });

  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    include: path.resolve(__dirname, '../src'),
    exclude: /node_modules/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
        options: {
          silent: true,
          transpileOnly: true,
          useCache: true,
          reportFiles: ['src/**/*.{ts,tsx}'],
          forceIsolatedModules: true
        }
      },
      {
        loader: require.resolve('react-docgen-typescript-loader'),
        options: {
          tsconfigPath: path.resolve(__dirname, '../tsconfig.storybook.json')
        }
      }
    ]
  });

  config.module.rules.push({
    test: /\.(png|woff|eot|ttf|svg)$/,
    loader: require.resolve('file-loader'),
    include: path.resolve(__dirname, '../'),
    exclude: [/node_modules/, path.resolve(__dirname, '../src/assets/svg')],
    options: {
      outputPath: 'assets'
    }
  });

  config.plugins.push(
    new HardSourceWebpackPlugin([
      {
        // HardSource works with mini-css-extract-plugin but due to how
        // mini-css emits assets, assets are not emitted on repeated builds with
        // mini-css and hard-source together. Ignoring the mini-css loader
        // modules, but not the other css loader modules, excludes the modules
        // that mini-css needs rebuilt to output assets every time.
        test: /mini-css-extract-plugin[\\/]dist[\\/]loader/
      }
    ])
  );

  config.plugins.push(new TSDocgenPlugin());

  return config;
};