bruno2ms/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dummy</title>
    <link rel="stylesheet" href="dist/css/styles.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
    <div id="app" >
        <div class="loading">Loading…</div>
    </div>
    <script src="dist/js/index.js"></script>
</body>
</html>

## package.json
{
  "name": "meetup",
  "version": "1.0.0",
  "description": "Webpack React Setup for SilverStripe Projects",
  "main": "index.js",
  "author": "Roman Schmid",
  "license": "MIT",
  "scripts": {
    "build": "webpack --bail",
    "serve": "webpack --watch"
  },
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.4.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "browser-sync": "^2.18.8",
    "browser-sync-webpack-plugin": "^1.1.4",
    "css-loader": "^0.26.4",
    "extract-text-webpack-plugin": "^2.1.0",
    "node-sass": "^4.5.0",
    "sass-loader": "^6.0.3",
    "webpack": "^2.2.1"
  }
}

## webpack.config.js
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
//const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

const extractCSS = new ExtractTextPlugin({
  filename: "css/styles.css",
  allChunks: true
});

const IS_PROD = (process.env.NODE_ENV === 'production');

module.exports = {
  entry: {
    'index' : `./src/index.jsx`
  },
  output: {
    path: './dist',
    filename: '[name].js',
  },
  resolve: {
    modules: [ 'node_modules', 'src' ],
    extensions: [".js", ".jsx", ".scss", ".css", ".html"]
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: [/node_modules/],
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015', 'react'],
            comments: false,
          }
        }
      }, {
        test: /(\.scss|\.css)$/,
        use: extractCSS.extract([
          {
            loader: "css-loader"
          }, {
            loader: "sass-loader"
          }
        ])
      }
    ]
  },
  plugins: [
    new BrowserSyncPlugin({
      // browse to http://localhost:3000/ during development,
      // ./public directory is being served
      host: 'localhost',
      port: 3000,
      server: {
        baseDir: ['./']
      }
    }),
    new webpack.DefinePlugin({
      PRODUCTION: JSON.stringify(IS_PROD)
    }),
    extractCSS,
    //IS_PROD ? new UglifyJSPlugin() : () => {}
  ],
  devtool: "source-map"
};
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Dummy</title>
	<link rel="stylesheet" href="dist/css/styles.css"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	</head>
	<body>
	<div id="app" >
	<div class="loading">Loading…</div>
	</div>
	<script src="dist/js/index.js"></script>
	</body>
	</html>
	{
	"name": "meetup",
	"version": "1.0.0",
	"description": "Webpack React Setup for SilverStripe Projects",
	"main": "index.js",
	"author": "Roman Schmid",
	"license": "MIT",
	"scripts": {
	"build": "webpack --bail",
	"serve": "webpack --watch"
	},
	"devDependencies": {
	"babel-core": "^6.23.1",
	"babel-loader": "^6.4.0",
	"babel-preset-es2015": "^6.22.0",
	"babel-preset-react": "^6.23.0",
	"browser-sync": "^2.18.8",
	"browser-sync-webpack-plugin": "^1.1.4",
	"css-loader": "^0.26.4",
	"extract-text-webpack-plugin": "^2.1.0",
	"node-sass": "^4.5.0",
	"sass-loader": "^6.0.3",
	"webpack": "^2.2.1"
	}
	}
	const webpack = require('webpack');
	const ExtractTextPlugin = require("extract-text-webpack-plugin");
	const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
	//const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

	const extractCSS = new ExtractTextPlugin({
	filename: "css/styles.css",
	allChunks: true
	});

	const IS_PROD = (process.env.NODE_ENV === 'production');

	module.exports = {
	entry: {
	'index' : `./src/index.jsx`
	},
	output: {
	path: './dist',
	filename: '[name].js',
	},
	resolve: {
	modules: [ 'node_modules', 'src' ],
	extensions: [".js", ".jsx", ".scss", ".css", ".html"]
	},
	module: {
	rules: [
	{
	test: /\.(js\|jsx)$/,
	exclude: [/node_modules/],
	use: {
	loader: 'babel-loader',
	options: {
	presets: ['es2015', 'react'],
	comments: false,
	}
	}
	}, {
	test: /(\.scss\|\.css)$/,
	use: extractCSS.extract([
	{
	loader: "css-loader"
	}, {
	loader: "sass-loader"
	}
	])
	}
	]
	},
	plugins: [
	new BrowserSyncPlugin({
	// browse to http://localhost:3000/ during development,
	// ./public directory is being served
	host: 'localhost',
	port: 3000,
	server: {
	baseDir: ['./']
	}
	}),
	new webpack.DefinePlugin({
	PRODUCTION: JSON.stringify(IS_PROD)
	}),
	extractCSS,
	//IS_PROD ? new UglifyJSPlugin() : () => {}
	],
	devtool: "source-map"
	};