zmactep/generate-web-app.sh

## generate-web-app.sh
#!/bin/sh

DIR=$(basename "`pwd`")

# Setup nodeJS project
cat > package.json <<EOF
{
  "name": "$DIR",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {},
  "devDependencies": {
  },
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack --mode development",
    "server": "webpack-dev-server"
  },
  "keywords": [],
  "author": "Pavel Yakovlev",
  "license": "BSD-3-Clause"
}
EOF
npm install --save-dev webpack webpack-cli webpack-dev-server @babel/core @babel/cli @babel/preset-env babel-loader style-loader css-loader stylus-loader stylus html-loader html-webpack-plugin clean-webpack-plugin

# Create directories
mkdir -p src/js
mkdir -p src/styles

# Create index template
cat > src/index.html <<EOF
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic template</title>
</head>
<body>
  <div id="container"></div>
</body>
</html>
EOF

# Create style template
cat > src/styles/main.styl <<EOF
body
  background-color: #000
  margin: 0px
  overflow: hidden
  color: white
  text-align: center

#container
  position: absolute
  width: 100%
  height: 100%
EOF

# Create JS template
cat > src/js/index.js <<EOF
import style from "../styles/main.styl";
EOF

# Create webpack config
cat > webpack.config.js <<EOF
const CleanWebpackPlugin = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: "js/app.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"]
            }
          }
        ],
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.styl$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "stylus-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin("dist"),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};
EOF
	#!/bin/sh

	DIR=$(basename "`pwd`")

	# Setup nodeJS project
	cat > package.json <<EOF
	{
	"name": "$DIR",
	"version": "1.0.0",
	"description": "",
	"main": "webpack.config.js",
	"dependencies": {},
	"devDependencies": {
	},
	"scripts": {
	"build": "webpack --mode production",
	"dev": "webpack --mode development",
	"server": "webpack-dev-server"
	},
	"keywords": [],
	"author": "Pavel Yakovlev",
	"license": "BSD-3-Clause"
	}
	EOF
	npm install --save-dev webpack webpack-cli webpack-dev-server @babel/core @babel/cli @babel/preset-env babel-loader style-loader css-loader stylus-loader stylus html-loader html-webpack-plugin clean-webpack-plugin

	# Create directories
	mkdir -p src/js
	mkdir -p src/styles

	# Create index template
	cat > src/index.html <<EOF
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Basic template</title>
	</head>
	<body>
	<div id="container"></div>
	</body>
	</html>
	EOF

	# Create style template
	cat > src/styles/main.styl <<EOF
	body
	background-color: #000
	margin: 0px
	overflow: hidden
	color: white
	text-align: center

	#container
	position: absolute
	width: 100%
	height: 100%
	EOF

	# Create JS template
	cat > src/js/index.js <<EOF
	import style from "../styles/main.styl";
	EOF

	# Create webpack config
	cat > webpack.config.js <<EOF
	const CleanWebpackPlugin = require("clean-webpack-plugin");
	const HtmlWebpackPlugin = require("html-webpack-plugin");

	module.exports = {
	entry: './src/js/index.js',
	output: {
	filename: "js/app.js"
	},
	module: {
	rules: [
	{
	test: /\.js$/,
	exclude: /node_modules/,
	use: [
	{
	loader: "babel-loader",
	options: {
	presets: ["@babel/preset-env"]
	}
	}
	],
	},
	{
	test: /\.html$/,
	use: [
	{
	loader: "html-loader",
	options: { minimize: true }
	}
	]
	},
	{
	test: /\.styl$/,
	use: [
	{
	loader: "style-loader"
	},
	{
	loader: "css-loader"
	},
	{
	loader: "stylus-loader"
	}
	]
	}
	]
	},
	plugins: [
	new CleanWebpackPlugin("dist"),
	new HtmlWebpackPlugin({
	template: "./src/index.html",
	filename: "./index.html"
	})
	]
	};
	EOF