burakozturk16/wrb.sh

## wrb.sh
mkdir src

echo '{
        "name": "webpack_babel_react_boilerplate",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
          "start": "webpack serve --mode development  --hot --open",
          "build": "webpack --config webpack.config.js --mode production"
        },
        "keywords": [],
        "author": "",
        "license": "ISC",
        "dependencies": {
          "react": "^17.0.2",
          "react-dom": "^17.0.2"
        },
        "devDependencies": {
          "@babel/core": "^7.15.8",
          "@babel/preset-env": "^7.15.8",
          "@babel/preset-react": "^7.14.5",
          "babel-loader": "^8.2.3",
          "css-loader": "^6.4.0",
          "file-loader": "^6.2.0",
          "html-webpack-plugin": "^5.4.0",
          "style-loader": "^3.3.1",
          "webpack": "^5.59.1",
          "webpack-cli": "^4.9.1",
          "webpack-dev-server": "^4.3.1"
        }
      }
' > package.json

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

ReactDOM.render(<App/>,document.querySelector("#root"));
' > src/index.js

echo 'import React from "react";

const App = () => (
    <div style="text-align: center">
        <h1>Webpack + Babel + React quick setup with hot reloading</h1>
        <br/>
        <p>happy coding :)</p>
    </div>
);

export default App;' > src/App.js


echo '<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WBR</title>
</head>

<body>
    <div id="root"></div>
</body>
</html>
' > src/index.html

echo '{
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env"
  ]
}' > .babelrc

echo 'const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "bundle.[hash].js",
        path: path.resolve(__dirname, "dist"),
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
        }),
    ],
    resolve: {
        modules: [__dirname, "src", "node_modules"],
        extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: require.resolve("babel-loader"),
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.png|svg|jpg|gif$/,
                use: ["file-loader"],
            },
        ],
    },
};
' > webpack.config.js

echo "All files created, npm install will start."

npm install

echo "All done :) It is running..."

npm run start
	mkdir src

	echo '{
	"name": "webpack_babel_react_boilerplate",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"start": "webpack serve --mode development --hot --open",
	"build": "webpack --config webpack.config.js --mode production"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"dependencies": {
	"react": "^17.0.2",
	"react-dom": "^17.0.2"
	},
	"devDependencies": {
	"@babel/core": "^7.15.8",
	"@babel/preset-env": "^7.15.8",
	"@babel/preset-react": "^7.14.5",
	"babel-loader": "^8.2.3",
	"css-loader": "^6.4.0",
	"file-loader": "^6.2.0",
	"html-webpack-plugin": "^5.4.0",
	"style-loader": "^3.3.1",
	"webpack": "^5.59.1",
	"webpack-cli": "^4.9.1",
	"webpack-dev-server": "^4.3.1"
	}
	}
	' > package.json

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

	ReactDOM.render(<App/>,document.querySelector("#root"));
	' > src/index.js

	echo 'import React from "react";

	const App = () => (
	<div style="text-align: center">
	<h1>Webpack + Babel + React quick setup with hot reloading</h1>
	<br/>
	<p>happy coding :)</p>
	</div>
	);

	export default App;' > src/App.js


	echo '<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>WBR</title>
	</head>

	<body>
	<div id="root"></div>
	</body>
	</html>
	' > src/index.html

	echo '{
	"presets": [
	"@babel/preset-react",
	"@babel/preset-env"
	]
	}' > .babelrc

	echo 'const HtmlWebpackPlugin = require("html-webpack-plugin");
	const path = require("path");

	module.exports = {
	entry: "./src/index.js",
	output: {
	filename: "bundle.[hash].js",
	path: path.resolve(__dirname, "dist"),
	},
	plugins: [
	new HtmlWebpackPlugin({
	template: "./src/index.html",
	}),
	],
	resolve: {
	modules: [__dirname, "src", "node_modules"],
	extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
	},
	module: {
	rules: [
	{
	test: /\.jsx?$/,
	exclude: /node_modules/,
	loader: require.resolve("babel-loader"),
	},
	{
	test: /\.css$/,
	use: ["style-loader", "css-loader"],
	},
	{
	test: /\.png\|svg\|jpg\|gif$/,
	use: ["file-loader"],
	},
	],
	},
	};
	' > webpack.config.js

	echo "All files created, npm install will start."

	npm install

	echo "All done :) It is running..."

	npm run start