Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/soldiercorp/webpack-starter-pug-sass-es6-jquery

Webpack 5 starter that supports Pug, SASS, ES6 ES7 ES8 ES9 ES10 ES11 ES12, VanillaJS/jQuery... (without framework) and generate URLs without the .html extension.
https://github.com/soldiercorp/webpack-starter-pug-sass-es6-jquery

es10 es11 es12 es6 es7 es8 es9 jquery pug sass stylus webpack webpack-5 webpack-starter yarn

Last synced: about 3 hours ago
JSON representation

Webpack 5 starter that supports Pug, SASS, ES6 ES7 ES8 ES9 ES10 ES11 ES12, VanillaJS/jQuery... (without framework) and generate URLs without the .html extension.

Awesome Lists containing this project

README

        

Webpack project starter with Pug, Sass/Stylus, jQuery, VanillaJS, Babel and Yarn

---

## Now working with Webpack 5 🎉
You can still use Webpack 4 by downloading [this branch](https://github.com/SoldierCorp/webpack-starter-pug-sass-es6-jquery/tree/webpack-4)

---

The purpose of this Webpack Starter is to allow people to create websites without any framework/library like React, Angular, Vue but only using simple but powerful technologies to build quality websites.

With this starter you can have clean URLs by removing the .html extension. For example:

- *website.com/contact*
- *website.com/blog*
- *website.com/profile*

## Demo

🔗 https://webpack-starter.edgardorl.com/

## Technologies used

- Templating: `Pug`
- Styling: `Sass` *you can also use stylus*
- Scripting: `jQuery or VanillaJS(plain Javascript)`
- JS Compiler: `Babel ES6 ES7 ES8 ES9 ES10 ES11 ES12` (that means you can use async/await, replaceAll, optional chaining... among many others)

## Don't like jQuery?
- You can remove it from the packages and from the Webpack config file and by removing it, your final build will be considerably reduced in size.

## Features

- Well organized folder structure for views, styles, and assets.
- Webpack notifier on every compilation.
- Compatibility with `manifest`, `browserconfig`, and other external files you wish to include.
- `Babel module resolver` configured to use alias and simplify the paths you need to import.
- `Editorconfig`
- Yarn.
- PostCSS.

## Run dev server in a different port
```
yarn dev --port your_port_number
```

## 🌠 Showcase
Websites using this starter across the web.
- https://gameserverkings.com/
- https://svil.co/
- https://audience.gg/
- https://curidental.com/
- https://fluidai.netlify.app/
- https://safecontract.netlify.app/

Did you build a website with this starter? Add your website url to this file and submit a PR 🙂

## Contributions

Any contribution is well received. You only have to fork this repo and submit your PRs with some descriptive text.

## Terms of use

Feel free to use it in the way you want. It will be awesome if you could add a link/mention to the original repository or me, so more people can use it in their projects 🙂

## Donations

A donation to buy more coffee it's always well received!

Buy Me A Coffee

## Blog post
https://sectorgeek.com/simple-webpack-starter-with-pug-sass-jquery-es6-and-more/