Untitled

#!/bin/sh
npm install webpack webpack-dev-server babel-loader babel-core babel-preset-es2015 style-loader css-loader node-sass sass-loader postcss-loader autoprefixer --save-dev
cat <<EOT > webpack.config.js
var path = require('path');
var autoprefixer = require('autoprefixer');

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'build'),
		filename: "bundle.js",
		publicPath: "/"
	},
	module: {
		loaders: [
			{ test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']},
			{ test: /\.js$/, loader: 'babel', exclude: /(node_modules|bower_components)/, query: { cacheDirectory: true, presets: ['es2015']}}
		]
	},
	postcss: function() { return [autoprefixer] }
}
EOT
# Add build directory to gitignore
echo "# build directory" >> .gitignore
echo "build/bundle.js" >> .gitignore
mkdir build
mkdir src
cat <<EOT > build/index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Example app</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
EOT
cat <<EOT > src/index.js
import './styles.scss';

document.getElementById('root').innerHTML = 'Hello world!';
EOT
touch src/styles.scss
cat <<EOT
Add this to your package.json:

"scripts": {
	"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
	"start": "webpack-dev-server --hot --inline --content-base build/"
}
EOT