typescript-react app bootstrap

gulpfile.js

const path = require('path')
const gulp = require('gulp')
const util = require('gulp-util')
const webpack = require('webpack')
const WebpackDevServer = require('webpack-dev-server')

const webpackConfigDev = require('./config/webpack.config.dev')
const webpackConfigProd = require('./config/webpack.config.prod')

gulp.task('client:compile', cb => {
  webpack(webpackConfigProd, (err, stats) => {
    if (err) throw new gutil.PluginError('webpack', err)
    util.log('[webpack]', stats.toString())
    cb()
  })
})

gulp.task('serve', () => {
  const compiler = webpack(webpackConfigDev)

  const server = new WebpackDevServer(compiler, {
    contentBase: './build/public',
    hot: true,
    stats: {
      colors: true
    }
  })

  server.listen(8080, 'localhost', err => {
    if (err) throw new gutil.PluginError('webpack-dev-server', err)
    util.log('[webpack-dev-server]', 'http://localhost:8080')
  })
})

gulp.task('default', () => {
  console.log('ok')
})

loaders.js

module.exports = [{
  test: /\.tsx?$/,
  loader: 'ts'
}, {
  test: /\.css$/,
  loader: 'style-loader!css-loader'
}, {
  test: /\.scss/,
  loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
}, {
  test: /\.woff(2)?(\?v=.+)?$/,
  loader: 'url-loader?limit=10000&minetype=application/font-woff'
}, {
  test: /\.(ttf|eot|svg|otf)(\?v=.+)?$/,
  loader: 'file-loader'
}, {
  test: /\.(png|jpg|gif)$/,
  loader: 'file-loader?limit=8192'
}]

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "build",
    "jsx": "react"
  }
}

webpack.config.dev.js

const path = require('path')
const webpack = require('webpack')
const loaders = require('./loaders')
const vendor = require('./vendor')

module.exports = {
  entry: {
    app: ['webpack-dev-server/client?http://localhost:8080/', 'webpack/hot/dev-server', path.join(__dirname, '../src/client/app.tsx')],
    vendor
  },
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, '../build/public')
  },
  module: {
    loaders
  },
  ts: {
    configFileName: 'config/tsconfig.client.json'
  },
  devServer: {
    proxy: {
      '/': {
        target: 'http://localhost:3000'
      }
    }
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js', Infinity),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("development")
      }
    })
  ]
}

webpack.config.prod.js

const path = require('path')
const webpack = require('webpack')
const loaders = require('./loaders')
const vendor = require('./vendor')

module.exports = {
  entry: {
    app: [path.join(__dirname, '../src/client/app.tsx')],
    vendor
  },
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, '../build/public')
  },
  module: {
    loaders
  },
  ts: {
    configFileName: 'config/tsconfig.client.json'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js', Infinity),
    new webpack.ProvidePlugin({
      'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("production")
      }
    })
  ]
}