project setup

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "Chrome >= 52",
            "FireFox >= 48",
            "Safari >= 7",
            "Explorer 11",
            "last 4 Edge versions"
          ]
        },
        "useBuiltIns": "entry"
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ]
}

package.json

  "devDependencies": {
    "@babel/core": "~7.1.6",
    "@babel/plugin-proposal-class-properties": "~7.1.0",
    "@babel/plugin-proposal-decorators": "~7.1.6",
    "@babel/plugin-proposal-object-rest-spread": "~7.0.0",
    "@babel/preset-env": "~7.1.6",
    "@babel/preset-react": "~7.0.0",
    "@storybook/addon-a11y": "4.0.7",
    "@storybook/addon-actions": "~4.0.9",
    "@storybook/addon-info": "4.0.7",
    "@storybook/addon-jest": "4.0.7",
    "@storybook/addon-knobs": "4.0.7",
    "@storybook/addon-notes": "~4.0.8",
    "@storybook/addon-options": "4.0.7",
    "@storybook/addon-storysource": "4.0.7",
    "@storybook/addon-viewport": "4.0.7",
    "@storybook/addons": "4.0.7",
    "@storybook/react": "4.0.7",
    "autoprefixer": "9.3.1",
    "babel-core": "~7.0.0-bridge.0",
    "babel-eslint": "~10.0.1",
    "babel-jest": "~23.6.0",
    "babel-loader": "~8.0.4",

webpack.config.js

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
        include: [
          path.resolve(__dirname, '../src/'),
          path.resolve(__dirname, '../dmp/'),
        ],
        exclude: [
          path.resolve(__dirname, '../src/components/'),
          path.resolve(__dirname, '../dmp/components/'),
        ],
      },

      {
        test: /\.scss$/,
        loaders: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader',
          'themify',
        ],
        include: [
          path.resolve(__dirname, './'),
          path.resolve(__dirname, '../src/components/'),
          path.resolve(__dirname, '../dmp/components/'),
        ],
      },

      {
        test: /\.(woff|woff2|eot|ttf|otf|svg|png|gif|jpg|webp)$/,
        loaders: ['file-loader'],
        include: path.resolve(__dirname, '../'),
      },

      {
        test: /\.js$/,
        loaders: [
          {
            loader: require.resolve('@storybook/addon-storysource/loader'),
            options: {
              prettierConfig: {
                parser: 'babylon',
              },
            },
          },
          {
            loader: 'eslint-loader',
            options: {
              emitError: true,
              failOnError: true,
            },
          },
        ],
        include: path.resolve(__dirname, './stories/'),
      },

      {
        test: /\.js$/,
        loaders: [
          {
            loader: 'eslint-loader',
            options: {
              emitError: true,
              failOnError: true,
            },
          },
        ],
        include: path.resolve(__dirname, '../'),
        exclude: path.resolve(__dirname, '../node_modules/'),
      },
    ],
  },

  resolve: {
    alias: {
      '@': path.join(__dirname, '../src'),
    },
  },

  resolveLoader: {
    modules: ['node_modules', path.resolve(__dirname, 'loaders')],
  },
};