{"id":13807663,"url":"https://github.com/WeAreAthlon/frontend-webpack-boilerplate","last_synced_at":"2025-05-14T00:31:52.732Z","repository":{"id":37686627,"uuid":"96102257","full_name":"WeAreAthlon/frontend-webpack-boilerplate","owner":"WeAreAthlon","description":"Simple starter webpack 5 project template supporting SASS/PostCSS, Babel ES7, browser syncing, code linting. Easy project setup having multiple features and developer friendly tools.","archived":false,"fork":false,"pushed_at":"2025-04-28T03:51:50.000Z","size":5685,"stargazers_count":736,"open_issues_count":9,"forks_count":205,"subscribers_count":33,"default_branch":"master","last_synced_at":"2025-05-13T21:29:08.823Z","etag":null,"topics":["babel","boilerplate","browser-syncing","build-tool","developer-tools","es6","eslint","html","javascript","optimize-assets","postcss","sass","setup","stylelint","template","webpack","webpack-configuration","webpack5"],"latest_commit_sha":null,"homepage":"https://www.weareathlon.com","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WeAreAthlon.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["pnikolov"]}},"created_at":"2017-07-03T11:07:35.000Z","updated_at":"2025-04-21T18:06:22.000Z","dependencies_parsed_at":"2023-02-19T04:01:29.622Z","dependency_job_id":"91bae26b-6a3a-43c4-ad41-01223c416a86","html_url":"https://github.com/WeAreAthlon/frontend-webpack-boilerplate","commit_stats":{"total_commits":374,"total_committers":9,"mean_commits":41.55555555555556,"dds":"0.44919786096256686","last_synced_commit":"6501de0d5536d748eef49cb41fb8253b1e04f88f"},"previous_names":[],"tags_count":66,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WeAreAthlon%2Ffrontend-webpack-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WeAreAthlon%2Ffrontend-webpack-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WeAreAthlon%2Ffrontend-webpack-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WeAreAthlon%2Ffrontend-webpack-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WeAreAthlon","download_url":"https://codeload.github.com/WeAreAthlon/frontend-webpack-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254046365,"owners_count":22005577,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","boilerplate","browser-syncing","build-tool","developer-tools","es6","eslint","html","javascript","optimize-assets","postcss","sass","setup","stylelint","template","webpack","webpack-configuration","webpack5"],"created_at":"2024-08-04T01:01:28.404Z","updated_at":"2025-05-14T00:31:47.717Z","avatar_url":"https://github.com/WeAreAthlon.png","language":"HTML","funding_links":["https://github.com/sponsors/pnikolov"],"categories":["HTML"],"sub_categories":[],"readme":"# Webpack 5 Boilerplate Template\n\n![Maintenance](https://img.shields.io/maintenance/yes/2024?logo=github)\n![Build Status](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/actions/workflows/deploy.yml/badge.svg)\n![webpack-current](https://img.shields.io/badge/webpack-v5.90.3-green?logo=webpack)\n![node-current (scoped)](https://img.shields.io/node/v/@weareathlon/frontend-webpack-boilerplate)\n[![@weareathlon/frontend-webpack-boilerplate](https://snyk.io/advisor/npm-package/@weareathlon/frontend-webpack-boilerplate/badge.svg)](https://snyk.io/advisor/npm-package/@weareathlon/frontend-webpack-boilerplate)\n[![GitHub Issues](https://img.shields.io/github/issues-raw/WeAreAthlon/frontend-webpack-boilerplate)](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/issues)\n[![Known Vulnerabilities](https://snyk.io/test/github/WeAreAthlon/frontend-webpack-boilerplate/badge.svg?targetFile=package.json)](https://snyk.io/test/github/WeAreAthlon/frontend-webpack-boilerplate?targetFile=package.json)\n[![npm](https://img.shields.io/npm/dm/@weareathlon/frontend-webpack-boilerplate)](https://www.npmjs.com/package/@weareathlon/frontend-webpack-boilerplate)\n[![GitHub License](https://img.shields.io/github/license/WeAreAthlon/frontend-webpack-boilerplate)](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/blob/master/LICENSE)\n\n![Front-end Webpack Boilerplate](https://repository-images.githubusercontent.com/96102257/4be7b600-61f1-11e9-9ebf-67b17d5ba125)\n\n## Demo\n\n- [Demo page demonstrating building - SASS, JavaScript, Images, Fonts, HTML](https://weareathlon.github.io/frontend-webpack-boilerplate/)\n\n# Table of Contents\n\n- [Webpack 5 Boilerplate Template](#webpack-5-boilerplate-template)\n  - [Demo](#demo)\n  - [Features](#features)\n  - [Requirements](#requirements)\n- [Setup](#setup)\n  - [Installation](#installation)\n  - [Define Package Metadata](#define-package-metadata)\n- [Configuration](#configuration)\n  - [Environment Configuration](#environment-configuration)\n  - [Additional webpack configuration](#additional-webpack-configuration)\n- [Development](#development)\n  - [Assets Source](#assets-source)\n  - [Build Assets](#build-assets)\n    - [One time build assets for development](#one-time-build-assets-for-development)\n    - [Build assets and enable source files watcher](#build-assets-and-enable-source-files-watcher)\n    - [Start a development server - reloading automatically after each file change.](#start-a-development-server---reloading-automatically-after-each-file-change)\n- [Production](#production)\n  - [Build Assets](#build-assets-1)\n  - [Get Built Assets](#get-built-assets)\n- [Run Code Style Linters](#run-code-style-linters)\n  - [SASS](#sass)\n  - [JavaScript](#javascript)\n- [Additional Tools](#additional-tools)\n  - [Run Assets Bundle Analyzer](#run-assets-bundle-analyzer)\n  - [Continuous Integration](#continuous-integration)\n\n## Features\n\n- **0** dependencies\n- **Simple setup** instructions\n  - Start development of a project right away with **simple**, **configured**, **linter enabled**, **browser synced** asset files.\n- Configuration per **environment**\n  - `development` - [`sourcemaps`](https://webpack.js.org/configuration/devtool/), [`browser synced developmentment server`](https://webpack.js.org/configuration/dev-server/)\n  - `production` - [`minification`](https://webpack.js.org/plugins/terser-webpack-plugin/), [`sourcemaps`](https://webpack.js.org/configuration/devtool/)\n- Configurable **browsers versions support**. It uses [`browserslist`](https://github.com/browserslist/browserslist#full-list) - just specify the browsers you want to support in the `package.json` file for `browserslist`:\n\n```js\n\"browserslist\": [\n    \"last 2 versions\",\n    \"\u003e 5%\"\n]\n```\n\n- The built CSS / JavaScript files will respect the **configured supported browser versions** using the following tools:\n  - [`autoprefixer`](https://github.com/postcss/autoprefixer) - automatically adds vendor prefixes to CSS rules\n  - [`babel-preset-env`](https://babeljs.io/docs/en/babel-preset-env) - smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (_and optionally, browser polyfills_) are needed by your target environment(s).\n- Demo project files to be used as a reference and **example demo** building of:\n  - _JavaScript_\n  - _SASS / PostCSS_\n  - _HTML_ templates\n  - _Images_ (_CSS backgrounds and image tags_)\n  - _Videos_\n  - _Fonts_\n- Support for **assets optimization** for production environment with ability to configure:\n  - **Code Minification** of _JavaScript_ and _CSS_ processed files.\n  - **Optimize Assets Loading** - inline and embed **images** / **fonts** files having file size below a _configurable_ threshold value.\n  - **Images Optimisation** - optimize `jpeg`, `jpg`, `png`, `gif`, `svg` filesize and loading type via [`imagemin`](https://github.com/imagemin/imagemin). Plugin and Loader for webpack to optimize (_compress_) all images using `imagemin`. Do not worry about size of images, now they are always optimized/compressed.\n- Support for **source code syntax style and formatting linters** that analyze source code to flag any programming errors, bugs, stylistic errors or suspicious constructs:\n  - **SASS/PostCSS syntax cheker** - you can change or add additional rules in `.sasslintrc` file. Configuration options can be found on [`sass-lint`](https://github.com/sasstools/sass-lint/blob/master/lib/config/sass-lint.yml) documentation.\n  - **JavaScript syntax checker** - following the `airbnb` style, you can review and configure the rules in `.eslintrc` file. Configuration options can be found on [`eslint`](https://eslint.org/docs/user-guide/configuring) documentation.\n- Latest [Webpack 5](https://github.com/webpack/webpack) - _JavaScript_ module bundler.\n- Latest [SASS/PostCSS](https://github.com/sass/sass) compiler based on Dart `sass`.\n- Latest [Babel 7](https://github.com/babel/babel) (`@babel/core`) - JavaScript compiler - _Use next generation JavaScript, today._\n- Integration with [Github Actions](https://github.com/features/actions)\n  - [Demo deployment available to GitHub pages](https://weareathlon.github.io/frontend-webpack-boilerplate/)\n- Configured and ready to use **Webpack Dev Server** plugin for faster local development - [`webpack-dev-server`](https://webpack.js.org/configuration/dev-server/)\n- Integration with [Webpack Bundle Analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) - _Visualize size of webpack output files with an interactive zoomable treemap._\n\n## Requirements\n\n- `node` : `\u003e=18.12.0`\n- `npm`\n\n# Setup\n\n## Installation\n\n1. Choose and download the latest template release from [List of Releases](https://github.com/WeAreAthlon/frontend-webpack-boilerplate/releases).\n2. Extract the release archive to a new directory, rename it to your project name and browse the directory.\n3. Install all dependencies using `npm` _clean install_ command.\n\n```sh\n$ npm ci\n```\n\n\u003e More on the clean install npm command can be read here [`npm ci`](https://docs.npmjs.com/cli/ci.html)\n\n\u003e You can still use `npm install` in cases the `npm ci` raises system error due to specific platform incompatibilities.\n\n## Define Package Metadata\n\n- Amend `package.json` file and optionally specify:\n  - `name` - Name of your project. A name can be optionally prefixed by a scope, e.g. `@myorg/mypackage`.\n  - `version` - Specify and maintain a version number indicator for your project code.\n  - `author` - Your organisation or just yourself. You can also specify [`contributors`](https://docs.npmjs.com/files/package.json#people-fields-author-contributors).\n  - `description` - Short description of your project.\n  - `keywords` - Put keywords in it. It’s an array of strings.\n  - `repository` - Specify the place where your code lives.\n  - `license` - Announce your code license, figure out the license from [Choose an Open Source License](https://choosealicense.com) .\n  - `browserslist` - Specify the supported browsers versions - you can refer to [full list](https://github.com/browserslist/browserslist#full-list) of availalbe options.\n\n# Configuration\n\n## Environment Configuration\n\n- Edit the [`configuration/environment.js`](configuration/environment.js) if you want to specify:\n  - **`server`**: configure development server, specify `host`, `port`. Refer to the full development server configuration options for [`webpack-dev-server`](https://webpack.js.org/configuration/dev-server/).\n  - **`limits`**: configure file size thresholds for assets optimizations.\n    - Image/Font files size in bytes. Below this value the image file will be served as Data URL (_inline base64_).\n  - **`paths`**: `src` or `dist` directories names and file system location.\n\n## Additional `webpack` configuration\n\nYou can additionally configure `webpack` for specific environment:\n\n- `development` - [`configuration/webpack.dev.config.js`](configuration/webpack.dev.config.js)\n- `production` - [`configuration/webpack.prod.config.js`](configuration/webpack.prod.config.js)\n  - Note that if you prefer to build and deploy [`sourcemap`](https://webpack.js.org/configuration/devtool/#production) files:\n    \u003e You should configure your server to disallow access to the _Source Map_ files for normal users!\n\n# Development\n\n## Assets Source\n\n- **SASS/PostCSS** files are located under `src/scss/`\n- **JavaScript** files with support of latest ECMAScript _ES6 / ECMAScript 2016(ES7)/ etc_ files are located under `src/js/`\n- **Image** files are located under `src/images/`\n- **Font** files are located under `src/fonts/`\n- **HTML** files are located under `src/`\n  - It will **automatically** build **all HTML files** placed under `src/` directory, no need to manually configure each template anymore!\n\n## Build Assets\n\n### One time build assets for development\n\n```sh\n$ npm run build\n```\n\n### Build assets and enable source files watcher\n\n```sh\n$ npm run watch\n```\n\nThis command is suitable if you develop with external web server.\n\n\u003e **Note:** File watching does not work with _NFS_ (_Windows_) and virtual machines under _VirtualBox_. Extend the configuration in such cases by:\n\n```js\nmodule.exports = {\n  //...\n  watchOptions: {\n    poll: 1000, // Check for changes every second\n  },\n};\n```\n\n### Start a development server - reloading automatically after each file change.\n\n```sh\n$ npm run dev\n```\n\n# Production\n\n## Build Assets\n\nOptimize assets for production by:\n\n```sh\n$ npm run production\n```\n\n## Get Built Assets\n\n- _CSS_ files are located under `/dist/css/`\n- _JavaScript_ files with support of _ES6 / ECMAScript 2016(ES7)_ files are located under `/dist/js/`\n- _Images_ are located under `/dist/images/`\n  - Images part of the _design_ (_usually referenced in the CSS_) are located under `/dist/images/design/`\n  - Images part of the _content_ (_usually referenced via `\u003cimg\u003e` tags_) are located under `/dist/images/content/`\n- _Fonts_ are located under `/dist/fonts/`\n- _HTML_ files are located under `/dist/`\n\n# Run Code Style Linters\n\n## SASS\n\n```sh\n$ npm run lint:sass\n```\n\n## JavaScript\n\n```sh\n$ npm run lint:js\n```\n\n# Additional Tools\n\n## Run Assets Bundle Analyzer\n\n```sh\n$ npm run stats\n```\n\n\u003e This will open the visualisaion on the default configuraiton URL `localhost:8888`, you can change this URL or port following the [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-cli) documentation.\n\n## Continuous Integration\n\nThis boilerplate template contains integration with [Github Actions](https://github.com/features/actions/). The build system runs all linting scripts and deploys production optimized pages to _GitHub_ pages upon push to the `master` branch. However, note that this deployment flow only works for _Project Pages_, as User and Organization pages [only support the master branch flow](https://help.github.com/articles/user-organization-and-project-pages/).\n\nFor more information on how to set up alternative deployment processes, check out the [Github Actions documentation on deployment](https://docs.github.com/en/actions/deployment/about-deployments/deploying-with-github-actions). The service can deploy to dozens of cloud providers, including Heroku, AWS, and Firebase.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWeAreAthlon%2Ffrontend-webpack-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWeAreAthlon%2Ffrontend-webpack-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWeAreAthlon%2Ffrontend-webpack-boilerplate/lists"}