erickzhaoerickzhao
283

Static Html Webpack Boilerplate

screenshot of Static Html Webpack Boilerplate
scss

modern tooling for old-school static webpage development

Github

Overview

The Static HTML Webpack Boilerplate is a setup that allows users to write their own styling, scripts, and mark-up using modern build tools. It provides features such as SCSS and JavaScript code compilation, linting tests, live reloading, and automatic copying of assets. The boilerplate also supports continuous integration with Travis CI and deployment to GitHub Pages.

Features

  • Write SCSS and modern JavaScript code: Users can write their code in the src directory and have it compiled into minified, transpiled code for production in the dist directory.
  • Continuous integration with linting tests and deploying to gh-pages: The boilerplate is integrated with Travis CI to run linting tests and deploy the code to GitHub Pages when changes are pushed to the master branch.
  • Live reloading with webpack-dev-server: Users can use the npm run start:dev command to start a development server at localhost:9000 with live reloading for JS, SCSS, and HTML.
  • ES6+ to ES5 transpilation, bundling, and minification: The JavaScript code written in the src directory will be transpiled, bundled, and minified into a single file (app.bundle.js) in the dist directory.
  • SCSS to CSS transpilation, bundling, autoprefixing, and minification: The SCSS code written in the src directory will be transpiled, bundled, autoprefixed, and minified into a single file (style.bundle.css) in the dist directory.
  • Automatic copying of HTML and static assets: HTML files and static assets from the src directory will be automatically copied to the dist directory.
  • Linting for styles and scripts: The boilerplate provides linting for both SCSS stylesheets and JavaScript code.

Summary

The Static HTML Webpack Boilerplate is a convenient setup for developers who prefer writing their own code using modern build tools. It provides features such as SCSS and JavaScript code compilation, linting tests, live reloading, and integration with Travis CI for continuous integration and deployment to GitHub Pages. With its easy installation process and useful commands, developers can quickly get started and streamline their development workflow.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

Stylelint

Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.