Skip to content

A lightweight foundation for your next webpack based frontend project.

Notifications You must be signed in to change notification settings

joshkemmer/webpack-static-site

Repository files navigation

Enjoy hand-writing your HTML? Keep it old-school with modern build tools. This boilerplate setup makes it easier to write your own styling, scripts, and mark-up.

✨ Features

  • Write SCSS and modern JavaScript code in src and build minified, transpiled code for production in dist
  • Linting tests
  • Live reloading with webpack-dev-server
  • ES6+ to ES5 transpilation, bundling, and minification
  • SCSS to CSS transpilation, bundling, autoprefixing, and minification
  • Automatic copying of HTML and static assets from src to dist folders
  • Linting for styles and scripts

🛠 Usage

  • Write all your ES2015+ Javascript code in src/js and SCSS styling in src/styles. Store static assets in src/assets. Organize HTML files the way you like.
  • Available commands:
    • npm run build: Build files to the dist folder. Transpiles down to ES5 and bundles all JS into app.bundle.js. Transpiles SCSS to CSS and adds prefixing into style.bundle.css. Copies static assets and HTML over, and bundled CSS and JS gets added to HTML file.
    • npm run dev: Run webpack-dev-server at localhost:9000. Includes live reloading on any Javascript/SCSS/HTML changes.
    • npm run preview: Builds files and runs a local production server on localhost:8080 with http-server.
    • npm run lint:js: Lints JS with ESLint.
    • npm run lint:styles: Lints SCSS stylesheets with stylelint.
    • npm run lint:html: Lints HTML for a11y issues using pa11y.

About

A lightweight foundation for your next webpack based frontend project.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published