.babelrc

{
  "presets": [
    "es2015",
    "react",
    "survivejs-kanban"
  ],
  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties",
    "react-hot-loader/babel",
    "syntax-async-functions",
    "transform-regenerator"
  ]
}

webpack.config.base.js

// var webpack = require('webpack')
const fs = require('fs')
const path = require('path')

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
    modules: [
      path.join(__dirname, 'src', 'js'),
      'node_modules',
    ],
    alias: {
      'ui-common': path.resolve(__dirname, '../ui-common'),
      // 'ui-tools': path.resolve(__dirname, '../ui-common'),
    }
  },
  output: {
    filename: 'bundle.js',
    publicPath: ''
  },
  devtool: 'source-map',
  plugins: [
  ],
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: 'babel-loader',
        include: [
          path.join(__dirname, 'src', 'js'),
          path.join(__dirname, 'test')
        ],
        exclude: path.join(__dirname, 'node_modules'),
      },
      {
        test: /\.tsx?$/,
        use: 'awesome-typescript-loader',
        include: [
          path.join(__dirname, 'src', 'js'),
          path.resolve(__dirname, '../ui-common/ts'),
          fs.realpathSync(path.resolve(__dirname, 'node_modules/rapid-ui/ts')),
        ],
      },
      {
        test: /\.html$/,
        use: 'file-loader?name=[name].[ext]'
      },
      {
        test: /\.json$/,
        use: 'json-loader'
      },
      {
        test: path => {
          if (path.indexOf('app.yaml') >= 0) {
            console.log(path, /\.yaml$/.test(path) && !/state\/index.yaml$/.test(path) && !/structure\/app.yaml$/.test(path))
          }
          return /\.yaml$/.test(path) && !/state\/index.yaml$/.test(path) && !/structure\/app.yaml$/.test(path)
        },
        use: [
          {loader: 'json-loader'},
          {loader: 'yaml-loader'},
        ]
      },
      {
        test: path => {
          return /structure\/app\.yaml$/.test(path)
        },
        use: [
          {loader: 'json-loader'},
          {loader: './loaders/structure-loader'},
        ]
      },
      {
        test: path => {
          return /state\/index\.yaml$/.test(path)
        },
        use: [
          {loader: 'json-loader'},
          {loader: './loaders/state-loader'},
        ]
      },
    ]
  }
}

webpack.config.development.ts

const _ = require('lodash')
const webpack = require('webpack')
const utils = require('./webpack.config.utils')
const baseConfig = require('./webpack.config.base')
const path = require('path')

let backend = process.env.BACKEND
if (['dummy', 'firebase'].indexOf(backend) < 0) {
  throw new Error('Unknown backend: ' + backend)
}

module.exports = Object.assign({}, baseConfig, {
  devServer: {
    contentBase: path.resolve(__dirname, 'src'),
    port: 9000,
    hot: true,
  },
  entry: utils.createEntry(true),
  devtool: 'source-map',
  plugins: _.concat([
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'BACKEND': JSON.stringify(backend),
      'TIER': JSON.stringify('dev')
    }),
  ], baseConfig.plugins)
})

webpack.config.utils.js

const path = require('path')

module.exports = {
  createEntry: (devServer) => {
    let entry = [
      'babel-polyfill',
    ]

    if (devServer) {
      entry = entry.concat([
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://localhost:9000',
        'webpack/hot/dev-server',
      ])
    }

    entry = entry.concat([
      path.resolve(__dirname, 'src/js/main.jsx'),
      path.resolve(__dirname, 'src/index.html'),
    ])

    return entry
  }
}