liondancer/index.html

## index.html
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <title>Jifts</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

## server.js
import express from 'express';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import path from 'path';
import config from '../../webpack.config.dev';
import open from 'open';

/* eslint-disable no-console */

const port = 3000;
const app = express();
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.dev.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath,
  historyApiFallback: true
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {
  res.sendFile(path.join( __dirname, '../index.html'));
});

app.listen(port, err => {
  if (err) {
    console.log(err);
  } else {
    open(`http://localhost:${port}`);
  }
});

## webpack.config.dev.js
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';


export default {
  entry: [
    './app/index'
  ],
  devtool: 'inline-source-map',
  target: 'web',
  output: {
    path: __dirname + '/app/dist/', // Note: Physical files are only output by the production build task `npm run build`.
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './app',
    historyApiFallback: {
      index: './app/index.html'
    }
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],
  module: {
    rules: [
      {test: /\.js$/, use: {loader: 'babel-loader'}},
      {test: /(\.css)$/, use: ['style-loader', 'css-loader']},
      {test: /\.(png|svg|jpg|gif)$/, use: ['file-loader']},
      // for fonts
      {test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader']}
    ]
  }
};
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<title>Jifts</title>
	</head>
	<body>
	<div id="app"></div>
	<script src="./dist/bundle.js"></script>
	</body>
	</html>
	import express from 'express';
	import webpack from 'webpack';
	import webpackDevMiddleware from 'webpack-dev-middleware';
	import path from 'path';
	import config from '../../webpack.config.dev';
	import open from 'open';

	/* eslint-disable no-console */

	const port = 3000;
	const app = express();
	const compiler = webpack(config);

	// Tell express to use the webpack-dev-middleware and use the webpack.config.dev.js
	// configuration file as a base.
	app.use(webpackDevMiddleware(compiler, {
	publicPath: config.output.publicPath,
	historyApiFallback: true
	}));

	app.use(require('webpack-hot-middleware')(compiler));

	app.get('*', function(req, res) {
	res.sendFile(path.join( __dirname, '../index.html'));
	});

	app.listen(port, err => {
	if (err) {
	console.log(err);
	} else {
	open(`http://localhost:${port}`);
	}
	});
	import webpack from 'webpack';
	import HtmlWebpackPlugin from 'html-webpack-plugin';
	import CleanWebpackPlugin from 'clean-webpack-plugin';


	export default {
	entry: [
	'./app/index'
	],
	devtool: 'inline-source-map',
	target: 'web',
	output: {
	path: __dirname + '/app/dist/', // Note: Physical files are only output by the production build task `npm run build`.
	publicPath: '/',
	filename: 'bundle.js'
	},
	devServer: {
	contentBase: './app',
	historyApiFallback: {
	index: './app/index.html'
	}
	},
	plugins: [
	new CleanWebpackPlugin(['dist']),
	new webpack.HotModuleReplacementPlugin(),
	new webpack.NoEmitOnErrorsPlugin()
	],
	module: {
	rules: [
	{test: /\.js$/, use: {loader: 'babel-loader'}},
	{test: /(\.css)$/, use: ['style-loader', 'css-loader']},
	{test: /\.(png\|svg\|jpg\|gif)$/, use: ['file-loader']},
	// for fonts
	{test: /\.(woff\|woff2\|eot\|ttf\|otf)$/, use: ['file-loader']}
	]
	}
	};