lcaballero/init-webpack.sh

## init-webpack.sh
#!/bin/bash

function react() {
	npm init -y
	npm install -S \
		react \
		react-dom \
		redux \
	    babel-core \
		babel-loader \
		babel-plugin-add-module-exports \
		babel-plugin-react-html-attrs \
		babel-plugin-transform-class-properties \
		babel-plugin-transform-decorators-legacy \
		babel-preset-es2015 \
		babel-preset-react \
		babel-preset-stage-0 \
		node-sass \
		file-loader \
		style-loader \
		css-loader \
		sass-loader \
		webpack \
		webpack-dev-server
}

function wp_js() {
	local wp=$(cat <<EOF
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : false,
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: [
              'react-html-attrs',
              'transform-decorators-legacy',
              'transform-class-properties'
          ]
        }
      },
      {
        test: /\.css$/,
        loaders: ['style-loader','css-loader']
      },
      {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  output: {
    path: __dirname + "/dist/",
    filename: "client.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};
EOF
)

    echo "$wp" > webpack.config.js
}

function index_html() {
	local index=$(cat <<EOF
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Tutorials</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="client.js"></script>
  </body>
</html>
EOF
)

	echo "$index" > src/index.html
}

function entry_js() {
	local entry=$(cat <<EOF
import React from "react";
import ReactDOM from "react-dom";

require("file-loader?name=index.html!../index.html");

class Layout extends React.Component {
	render() {
		const { title } = this.props;
		return (
			<div>{ title }</div>
		)
	}
}

const render = () => {
    const app = document.getElementById('app');
    ReactDOM.render(<Layout title="Entry JS" />, app);
};

render();
EOF
)

	mkdir -p src/js/
	echo "$entry" > src/js/client.js
}

function clean() {
	rm -rf \
	   node_modules \
	   src \
	   dist \
	   package.json \
	   webpack.config.js
}

function all() {
	wp_js
	entry_js
	index_html
	react
	./node_modules/.bin/webpack
}

function serve() {
	./node_modules/.bin/webpack-dev-server --content-base dist --inline --hot
}

$1
	#!/bin/bash

	function react() {
	npm init -y
	npm install -S \
	react \
	react-dom \
	redux \
	babel-core \
	babel-loader \
	babel-plugin-add-module-exports \
	babel-plugin-react-html-attrs \
	babel-plugin-transform-class-properties \
	babel-plugin-transform-decorators-legacy \
	babel-preset-es2015 \
	babel-preset-react \
	babel-preset-stage-0 \
	node-sass \
	file-loader \
	style-loader \
	css-loader \
	sass-loader \
	webpack \
	webpack-dev-server
	}

	function wp_js() {
	local wp=$(cat <<EOF
	var debug = process.env.NODE_ENV !== "production";
	var webpack = require('webpack');
	var path = require('path');

	module.exports = {
	context: path.join(__dirname, "src"),
	devtool: debug ? "inline-sourcemap" : false,
	entry: "./js/client.js",
	module: {
	loaders: [
	{
	test: /\.js?$/,
	exclude: /(node_modules\|bower_components)/,
	loader: 'babel-loader',
	query: {
	presets: ['react', 'es2015', 'stage-0'],
	plugins: [
	'react-html-attrs',
	'transform-decorators-legacy',
	'transform-class-properties'
	]
	}
	},
	{
	test: /\.css$/,
	loaders: ['style-loader','css-loader']
	},
	{
	test: /\.scss$/,
	loaders: ['style-loader', 'css-loader', 'sass-loader']
	}
	]
	},
	output: {
	path: __dirname + "/dist/",
	filename: "client.js"
	},
	plugins: debug ? [] : [
	new webpack.optimize.DedupePlugin(),
	new webpack.optimize.OccurrenceOrderPlugin(),
	new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
	],
	};
	EOF
	)

	echo "$wp" > webpack.config.js
	}

	function index_html() {
	local index=$(cat <<EOF
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>React Tutorials</title>
	</head>
	<body>
	<div id="app"></div>
	<script src="client.js"></script>
	</body>
	</html>
	EOF
	)

	echo "$index" > src/index.html
	}

	function entry_js() {
	local entry=$(cat <<EOF
	import React from "react";
	import ReactDOM from "react-dom";

	require("file-loader?name=index.html!../index.html");

	class Layout extends React.Component {
	render() {
	const { title } = this.props;
	return (
	<div>{ title }</div>
	)
	}
	}

	const render = () => {
	const app = document.getElementById('app');
	ReactDOM.render(<Layout title="Entry JS" />, app);
	};

	render();
	EOF
	)

	mkdir -p src/js/
	echo "$entry" > src/js/client.js
	}

	function clean() {
	rm -rf \
	node_modules \
	src \
	dist \
	package.json \
	webpack.config.js
	}

	function all() {
	wp_js
	entry_js
	index_html
	react
	./node_modules/.bin/webpack
	}

	function serve() {
	./node_modules/.bin/webpack-dev-server --content-base dist --inline --hot
	}

	$1