bespoke + react + webpack

0--entry.js

import React from "react";
import bespoke from "bespoke";
import "styles.css";

// use react components, markdown or plain html files in the slides folder
var slidesContext = require.context("./slides", true, /\.(js|md|html)$/);

// sort slides by name, name them like this: ./slides/3-section/7-slide.md
var slides = slidesContext.keys().sort().map((key) => slidesContext(key));

class App extends React.Component {
  render() {
    return <article>
      {slides.map((slide) => {
        if(typeof slide === "string") {
          return <section dangerouslySetInnerHTML={{__html: slide}} />
        } else {
          return React.createElement(slide);
        }
      })}
    </article>
  }
}

var app = React.render(<App />, document.body);

var deck = bespoke.from("article", [
  // ...
]);

1--webpack.config.js

module.exports = {
  // ...
  module: {
    loaders: [
      [
        { test: /\.css$/, loader: "style-loader!css-loader?modules", include: path.resolve(__dirname, "app") },
        { test: /\.css$/, loader: "style-loader!css-loader" }
      ],
      { test: /\.md$/, loader: "html-loader!markdown-loader" },
      { test: /\.html$/, loader: "html-loader" },
      { test: /\.js$/, loader: "babel-loader", include: path.resolve(__dirname, "app") },
      { test: /\.(png|jpg|woff2?)$/, loader: "file-loader" }
    ]
  },
  // ...
  // useful plugins: html-webpack-plugin or static-render-webpack-plugin
  // useful tools: gh-pages
}

2--slide.md

# Welcome

![reference images relative to the slide](logo.png)

Slides can be markdown files, plain html files or full react components (for complex stuff).