Martin-Alexander/single-page-webpack.sh

## single-page-webpack.sh
#!/bin/sh

mkdir $1 && cd $1

yarn init
yarn add webpack webpack-dev-server \
babel-core babel-preset-es2015 \
babel-loader sass-loader css-loader style-loader \
extract-text-webpack-plugin \
node-sass --dev

mkdir -p assets/images
touch index.html
mkdir -p src/javascript
touch src/javascript/index.js
mkdir src/stylesheets
touch src/stylesheets/index.css
mkdir build
touch webpack.config.js
touch .gitignore

echo '{ "presets": [ "es2015" ] }' > .babelrc

echo "node_modules/*" > .gitignore

echo "const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: './src/javascript/',
  output: {
    filename: 'build/bundle.js'
  },
  devtool: 'sourcemap',
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }],
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: { minimize: true }
            },
            {
              loader: 'sass-loader',
              options: { minimize: true }
            }
          ]
        })
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [{
            loader: 'css-loader',
            options: { minimize: true }
          }]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('build/bundle.css')
  ]
}
" > webpack.config.js

echo "<!DOCTYPE>
<html>
  <head>
    <script type="text/javascript" src="build/bundle.js"></script>
    <link rel="stylesheet" href="build/bundle.css">
  </head>
  <body>

  </body>
</html>
" > index.html
	#!/bin/sh

	mkdir $1 && cd $1

	yarn init
	yarn add webpack webpack-dev-server \
	babel-core babel-preset-es2015 \
	babel-loader sass-loader css-loader style-loader \
	extract-text-webpack-plugin \
	node-sass --dev

	mkdir -p assets/images
	touch index.html
	mkdir -p src/javascript
	touch src/javascript/index.js
	mkdir src/stylesheets
	touch src/stylesheets/index.css
	mkdir build
	touch webpack.config.js
	touch .gitignore

	echo '{ "presets": [ "es2015" ] }' > .babelrc

	echo "node_modules/*" > .gitignore

	echo "const path = require('path');
	const ExtractTextPlugin = require('extract-text-webpack-plugin')

	module.exports = {
	entry: './src/javascript/',
	output: {
	filename: 'build/bundle.js'
	},
	devtool: 'sourcemap',
	module: {
	loaders: [{
	test: /\.js$/,
	exclude: /node_modules/,
	loader: 'babel-loader'
	}],
	rules: [
	{
	test: /\.scss$/,
	use: ExtractTextPlugin.extract({
	fallback: 'style-loader',
	use: [
	{
	loader: 'css-loader',
	options: { minimize: true }
	},
	{
	loader: 'sass-loader',
	options: { minimize: true }
	}
	]
	})
	},
	{
	test: /\.css$/,
	use: ExtractTextPlugin.extract({
	fallback: 'style-loader',
	use: [{
	loader: 'css-loader',
	options: { minimize: true }
	}]
	})
	}
	]
	},
	plugins: [
	new ExtractTextPlugin('build/bundle.css')
	]
	}
	" > webpack.config.js

	echo "<!DOCTYPE>
	<html>
	<head>
	<script type="text/javascript" src="build/bundle.js"></script>
	<link rel="stylesheet" href="build/bundle.css">
	</head>
	<body>

	</body>
	</html>
	" > index.html