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

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!

Blog post

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