Skip to content

Instantly share code, notes, and snippets.

@zmactep
Created February 23, 2019 21:44
Show Gist options
  • Save zmactep/d19d1f827844a7a8d66ca7acb8ebdd8a to your computer and use it in GitHub Desktop.
Save zmactep/d19d1f827844a7a8d66ca7acb8ebdd8a to your computer and use it in GitHub Desktop.
Generate web app with Webpack 4, Babel 7 and Stylus
#!/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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment