For debugging.

webpack.config.js

// ---------------------------------------------------------------------------

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');

// ---------------------------------------------------------------------------

const createSassPlugin = namePattern => {
  return new ExtractTextPlugin({
    filename: `${namePattern}.css`,
    disable: process.env.NODE_ENV === 'development' // ?? wut do
  });
};

const extractAllSass = createSassPlugin('chassis');
const extractSass = createSassPlugin('[name]');

const createEntry = dir => fs.readdirSync(`${__dirname}/src/${dir}`)
  .reduce((entry, name) => {
    if (/\./.test(name)) {
      return entry; // bail
    } else {
      entry[name] = path.join(__dirname, `src/${dir}/${name}`);

      return entry;
    }
  }, {});

const createCssRules = Plugin => ({
  test: /\.s?css$/,
  use: Plugin.extract({
    use: [
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
          sourceMap: true
        }
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          sourceMap: true,
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9'
              ],
              flexbox: 'no-2009'
            })
          ]
        }
      },
      {
        loader: require.resolve('sass-loader'),
        options: {
          sourceMap: true
        }
      },
      require.resolve('import-glob-loader')
    ],
    fallback: require.resolve('style-loader') // ?? wut do
  })
});

// Base
// ---------------------------------------------------------------------------

const baseConfig = {
  devtool: 'source-map',

  externals: {
    'classnames': {
      amd: 'classnames',
      commonjs2: 'classnames',
      commonjs: 'classnames',
      root: 'classNames'
    },

    'react-dom': {
      amd: 'react-dom',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      root: 'ReactDOM'
    },

    // @TODO: Need a regex to ignore imports like 'lodash/object/assign'
    // /^lodash\/.+$/

    'lodash': {
      amd: 'lodash',
      commonjs2: 'lodash',
      commonjs: 'lodash',
      root: '_'
    },

    'recompose': {
      amd: 'recompose',
      commonjs2: 'recompose',
      commonjs: 'recompose'
    },

    'prop-types': {
      amd: 'prop-types',
      commonjs2: 'prop-types',
      commonjs: 'prop-types',
      root: 'PropTypes'
    },

    'react': {
      amd: 'react',
      commonjs2: 'react',
      commonjs: 'react',
      root: 'React'
    }
  },

  resolveLoader: {
    extensions: ['.js'],

    modules: [
      `${__dirname}/src`,
      'node_modules'
    ],
  },

  resolve: {
    extensions: ['.js'],

    modules: [
      `${__dirname}/src`,
      'node_modules'
    ],

    alias: {
      components: path.resolve(__dirname, 'src/components'),
      hocs: path.resolve(__dirname, 'src/hocs'),
      images: path.resolve(__dirname, 'src/images'),
      styles: path.resolve(__dirname, 'src/styles'),
      utilities: path.resolve(__dirname, 'src/utilities')
    }
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        include: `${__dirname}/src`,
        loader: 'babel-loader',
        // options: {
        //   cacheDirectory: true
        // }
      },

      {
        exclude: [
          /\.html$/,
          /\.(js|jsx)$/,
          /\.s?css$/,
          /\.json$/,
          /\.bmp$/,
          /\.gif$/,
          /\.jpe?g$/,
          /\.png$/
        ],
        loader: require.resolve('file-loader'),
        options: {
          name: 'static/[name].[hash:8].[ext]'
        }
      },

      {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: require.resolve('url-loader'),
        options: {
          limit: 10000,
          name: 'static/[name].[hash:8].[ext]'
        }
      }
    ]
  }
};

// Configs
// ---------------------------------------------------------------------------

const all = Object.assign(
  {},
  baseConfig,
  {
    entry: path.resolve(__dirname, 'src/components'),
    output: {
      filename: 'chassis.bundle.js',
      libraryTarget: 'commonjs2',
      path: __dirname
    },
    plugins: [extractAllSass],
    module: { rules: baseConfig.module.rules.concat(createCssRules(extractAllSass)) }
  }
);

const components = Object.assign(
  {},
  baseConfig,
  {
    entry: createEntry('components'),
    output: {
      filename: '[name].js',
      library: 'chassis',
      libraryTarget: 'commonjs2',
      path: __dirname
    },
    plugins: [extractSass],
    module: { rules: baseConfig.module.rules.concat(createCssRules(extractSass)) }
  }
);

const hocs = Object.assign(
  {},
  baseConfig,
  {
    entry: createEntry('hocs'),
    output: {
      filename: '[name].js',
      libraryTarget: 'commonjs2',
      path: path.resolve(__dirname, 'hocs')
    },
    plugins: [extractSass],
    module: { rules: baseConfig.module.rules.concat(createCssRules(extractSass)) }
  }
);

const utilities = Object.assign(
  {},
  baseConfig,
  {
    entry: createEntry('utilities'),
    output: {
      filename: '[name].js',
      libraryTarget: 'commonjs2',
      path: path.resolve(__dirname, 'utilities')
    }
  }
);

const baseCss = Object.assign(
  {},
  baseConfig,
  {
    entry: path.resolve(__dirname, 'src/styles/main.scss'),
    output: {
      // This will create a temp JS file called main.css
      // Then the extract plugin will override that JS file with the correct main.css
      filename: 'main.scss',
      libraryTarget: 'commonjs2',
      path: path.resolve(__dirname)
    },
    plugins: [extractSass],
    module: { rules: baseConfig.module.rules.concat(createCssRules(extractSass)) }
  }
);

// ---------------------------------------------------------------------------

module.exports = [
  all,
  components,
  hocs,
  utilities,
  baseCss
];