An ES20XX starter with common frontend tasks using Webpack 5 as module bundler and npm scripts as task runner.
If you serve your files over HTTPS with HTTP/2, use compression (gzip, brotli...) for text-based resources, and respect accessibility rules, your lighthouse score will be 100%.
Node ">=15.0.0" (use brew or install it from here)
brew install nodeOSX & Linux:
git clone --depth 1 https://github.com/dmnsgn/frontend-boilerplate.git && cd frontend-boilerplate && rm -rf .git && git initWindows:
git clone --depth 1 https://github.com/dmnsgn/frontend-boilerplate.git && cd frontend-boilerplate && rd /s /q .git && git initnpm installOpen config/config.js:
| Key | Description | Type |
|---|---|---|
| PATHS | map of paths to the different folders needed by webpack and npm scripts |
Map |
| BROWSERS | the browsers targeted for babel-preset-env and browserslist (see full list here) |
Array |
Open package.json:
| Key | Description | Type |
|---|---|---|
| config.title | title used for metas and favicons | String |
| config.url | absolute url used for metas, robotstxt, sitemap and banner | String |
| config.lang | language for index.html and favicons | String |
| config.description | title used for metas, favicons and banner | String |
| config.imageWidth | width of the share image (default ${PACKAGE.config.url}/share.jpg) |
String |
| config.imageHeight | height of the share image (default ${PACKAGE.config.url}/share.jpg) |
String |
| config.type | Open Graph type | String |
| config.card | Twitter card | String |
| config.copyright | license acronym used for banner | String |
| config.handle | twitter handle for metas | String |
| config.analyticsUA | google analytics UA | String |
| config.pages | list of pages with id and optional name, description, EJS template for HtmlWebpackPlugin | Array |
| author.name | author name used for favicons | String |
| author.url | author url used for favicons | String |
npm run dev
// or npm startnpm run prod
// or npm run buildWebpack loaders
- Babel with preset-env and TypeScript
- PostCSS: see config/loaders/styles.js
- Sass
- Less
- Stylus
- fonts as Resources assets
- images as Resources assets, with automatic avif and webp fallbacks with convert-assets-webpack-plugin and
<picture>wrapping using posthtml, optimised with image-webpack-loader - videos as Resources assets
- svg as Resources assets and optimised with svgo-loader or as sprite with svg-sprite-loader
- html-loader
- ejs-loader
- glslify
- markdown-it-loader with markdown-it-attrs and markdown-it-toc-done-right
Webpack plugins
- DefinePlugin: create global constants which can be configured at compile time
- HotModuleReplacementPlugin: enable Hot Module Replacement
- HtmlWebpackPlugin with Lodash templates: simplify creation of HTML files
- HtmlWebpackProcessingPlugin: HTML pre-processing and post-processing for html-webpack-plugin.
- MiniCssExtractPlugin: lightweight CSS extraction plugin
- CssMinimizerWebpackPlugin: uses cssnano to optimize and minify your CSS.
- PurgecssWebpackPlugin: remove unused css.
- CrittersWebpackPlugin: inlines critical CSS and lazy-loads the rest.
- SpritesmithPlugin: convert a set of images into a spritesheet and SASS/LESS/Stylus mixins
- CompressionPlugin: Prepare compressed versions of assets to serve them with Content-Encoding (default to gzip). Requires server configuration so it is commented here
- GenerateSW: The GenerateSW plugin will create a service worker file for you and add it to the webpack asset pipeline.
- BannerPlugin: add a banner to the top of each generated chunk.
- ObsoleteWebpackPlugin: A Webpack plugin generates a browser-side standalone script that detects browser compatibility based on Browserslist and prompts website users to upgrade it.
- WebpackBundleAnalyzer: Visualize size of webpack output files with an interactive zoomable treemap.
npm run clean: remove all the files from thedistdirectorynpm run favicons: generate favicons files and/src/templates/_favicons.ejsnpm run robotstxt: generate robots.txt filenpm run sitemap: generate sitemap.xml file
Prettier formatter
MIT