charisTheo/create-webpack-react-app.sh

## create-webpack-react-app.sh
#!/bin/sh

if [ -z "$1" ]
then
   echo ""
   echo "Please enter a directory for your new project"
   echo "ex: create-webpack-react-app my-new-react-project"
   exit 1 # Exit script after printing help
fi

DIR=$1

mkdir -p "$DIR"
cd "$DIR"

BABELRC_CONTENTS='{
   "presets": [
      [ "@babel/preset-env", {
         "modules": false,
         "targets": {
            "browsers": [
               "last 2 Chrome versions",
               "last 2 Firefox versions",
               "last 2 Safari versions",
               "last 2 iOS versions",
               "last 1 Android version",
               "last 1 ChromeAndroid version",
               "ie 11"
            ]
         }
      } ],
      "@babel/preset-react"
   ],
   "plugins": [ "@babel/plugin-proposal-class-properties" ]
}'

WEBPACK_CONFIG_CONTENTS='const HtmlWebPackPlugin = require( "html-webpack-plugin" );
const path = require( "path" );

module.exports = {
   context: __dirname,
   entry: "./src/index.js",
   output: {
      path: path.resolve( __dirname, "dist" ),
      filename: "main.js",
      publicPath: "/",
   },
   devServer: {
      historyApiFallback: true
   },
   module: {
      rules: [
         {
            test: /\.js$/,
            use: "babel-loader",
         },
         {
            test: /\.css$/,
            use: ["style-loader", "css-loader"],
         },         {
            test: /\.(png|j?g|svg|gif)?$/,
            use: "file-loader"
         }
]
   },
   plugins: [
      new HtmlWebPackPlugin({
         template: path.resolve( __dirname, "public/index.html" ),
         filename: "index.html"
      })
   ]
};'

APP_JS_CONTENTS='import React from "react";

class App extends React.Component {
   render() {
      return(
         <div>
            My App Component
         </div>
      );
   }
}
export default App'

INDEX_HTML_CONTENTS='<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>React App</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="main.js"></script></body>
</html>'

INDEX_JS_CONTENTS='import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render( <App/>, document.getElementById("root") );'

npm init --yes

sed -i '' '7i\
\ \ "dev": "webpack serve --mode development",
    ' ./package.json

sed -i '' '8i\
\ \ "prod": "webpack --mode=production",
    ' ./package.json

npm i react react-dom --save
npm i -D @babel/preset-react @babel/preset-env @babel/core babel-loader @babel/plugin-proposal-class-properties webpack webpack-cli webpack-dev-server html-webpack-plugin path style-loader css-loader file-loader

mkdir src public
touch webpack.config.js .babelrc src/index.js src/App.js public/index.html

echo "$BABELRC_CONTENTS" > ".babelrc"
echo "$WEBPACK_CONFIG_CONTENTS" > "webpack.config.js"
echo "$INDEX_JS_CONTENTS" > "src/index.js"
echo "$APP_JS_CONTENTS" > "src/App.js"
echo "$INDEX_HTML_CONTENTS" > "public/index.html"

echo "🚀  Start the development server by running:"
echo "    cd $DIR && npm run dev"
	#!/bin/sh

	if [ -z "$1" ]
	then
	echo ""
	echo "Please enter a directory for your new project"
	echo "ex: create-webpack-react-app my-new-react-project"
	exit 1 # Exit script after printing help
	fi

	DIR=$1

	mkdir -p "$DIR"
	cd "$DIR"

	BABELRC_CONTENTS='{
	"presets": [
	[ "@babel/preset-env", {
	"modules": false,
	"targets": {
	"browsers": [
	"last 2 Chrome versions",
	"last 2 Firefox versions",
	"last 2 Safari versions",
	"last 2 iOS versions",
	"last 1 Android version",
	"last 1 ChromeAndroid version",
	"ie 11"
	]
	}
	} ],
	"@babel/preset-react"
	],
	"plugins": [ "@babel/plugin-proposal-class-properties" ]
	}'

	WEBPACK_CONFIG_CONTENTS='const HtmlWebPackPlugin = require( "html-webpack-plugin" );
	const path = require( "path" );

	module.exports = {
	context: __dirname,
	entry: "./src/index.js",
	output: {
	path: path.resolve( __dirname, "dist" ),
	filename: "main.js",
	publicPath: "/",
	},
	devServer: {
	historyApiFallback: true
	},
	module: {
	rules: [
	{
	test: /\.js$/,
	use: "babel-loader",
	},
	{
	test: /\.css$/,
	use: ["style-loader", "css-loader"],
	}, {
	test: /\.(png\|j?g\|svg\|gif)?$/,
	use: "file-loader"
	}
	]
	},
	plugins: [
	new HtmlWebPackPlugin({
	template: path.resolve( __dirname, "public/index.html" ),
	filename: "index.html"
	})
	]
	};'

	APP_JS_CONTENTS='import React from "react";

	class App extends React.Component {
	render() {
	return(
	<div>
	My App Component
	</div>
	);
	}
	}
	export default App'

	INDEX_HTML_CONTENTS='<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>React App</title>
	</head>
	<body>
	<div id="root"></div>
	<script type="text/javascript" src="main.js"></script></body>
	</html>'

	INDEX_JS_CONTENTS='import React from "react";
	import ReactDOM from "react-dom";
	import App from "./App";

	ReactDOM.render( <App/>, document.getElementById("root") );'

	npm init --yes

	sed -i '' '7i\
	\ \ "dev": "webpack serve --mode development",
	' ./package.json

	sed -i '' '8i\
	\ \ "prod": "webpack --mode=production",
	' ./package.json

	npm i react react-dom --save
	npm i -D @babel/preset-react @babel/preset-env @babel/core babel-loader @babel/plugin-proposal-class-properties webpack webpack-cli webpack-dev-server html-webpack-plugin path style-loader css-loader file-loader

	mkdir src public
	touch webpack.config.js .babelrc src/index.js src/App.js public/index.html

	echo "$BABELRC_CONTENTS" > ".babelrc"
	echo "$WEBPACK_CONFIG_CONTENTS" > "webpack.config.js"
	echo "$INDEX_JS_CONTENTS" > "src/index.js"
	echo "$APP_JS_CONTENTS" > "src/App.js"
	echo "$INDEX_HTML_CONTENTS" > "public/index.html"

	echo "🚀 Start the development server by running:"
	echo " cd $DIR && npm run dev"