webpack.config.js

const path = require('path');

function loadersObjectToArray(loaders) {
  return Object.keys(loaders).map(name => loaders[name]);
}

function createConfig() {
  const componentsPath = [path.join(__dirname, 'components')];

  const cssLoader = {
    test: /\.css$/,
    include: componentsPath,
    use: [
      {
        loader: require.resolve('style-loader'),
        options: {
          esModule: false,
        },
      },
      {
        loader: require.resolve('css-loader'),
        options: {
          modules: {
            namedExport: false,
            exportLocalsConvention: 'as-is',
            localIdentName: '[local]_[hash:4]',
          },
          importLoaders: 1,
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          implementation: require('postcss'),
        },
      },
    ],
  };

  const externalCssLoader = {
    test: /\.css$/,
    include: [path.dirname(require.resolve('highlight.js/package.json'))],
    use: [require.resolve('style-loader'), require.resolve('css-loader')],
  };

  const babelLoader = {
    test: /\.[jt]sx?$/,
    sideEffects: false,
    include: componentsPath,
    loader: require.resolve('babel-loader'),
    options: {
      configFile: path.join(__dirname, 'babel.config.js'),
      cacheDirectory: true,
    },
  };

  const gifLoader = {
    test: /\.gif$/,
    include: componentsPath,
    loader: require.resolve('url-loader'),
  };

  const loaders = {
    cssLoader,
    externalCssLoader,
    babelLoader,
    gifLoader,
  };

  return {
    // Minimal config for building components
    config: {
      module: {
        rules: loadersObjectToArray(loaders),
      },
      resolve: {
        extensions: ['.js', '.ts', '.tsx'],
      },
    },
    componentsPath,
    loaders,
  };
}

const {config, componentsPath, loaders} = createConfig();

module.exports = {
  createConfig,
  config,
  componentsPath,
  loaders,
};