Created
February 23, 2019 21:44
-
-
Save zmactep/d19d1f827844a7a8d66ca7acb8ebdd8a to your computer and use it in GitHub Desktop.
Generate web app with Webpack 4, Babel 7 and Stylus
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/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