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.

Home Page: https://webpack-starter.edgardorl.com

License: MIT License

JavaScript 40.56% SCSS 25.64% Pug 33.80%

jquery webpack pug stylus sass webpack-starter yarn webpack-5 es6 es7

webpack-starter-pug-sass-es6-jquery's Introduction

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.

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/

webpack-starter-pug-sass-es6-jquery's People

Contributors

Stargazers

Watchers

webpack-starter-pug-sass-es6-jquery's Issues

How do you resolve your paths in production

I can't build correctly in production mode, the "/" setting in public path seems not work with initial config. My html search a wrong path to css and js bundles.

I try "./" but i can't resolve pictures imported from css.

That's the only tricks i've done for the moment.
In my app.js i do the following import, i also remove url-loader file limit

document.addEventListener("DOMContentLoaded" , function(){

  require.context("./assets/images/", true, /\.(png|svg|jpg|gif)$/);

});

Please help me i don't understand all webpack things...

EDIT : I think it's cause by my desktop cause your initial project without any changes doesn't find bundles..

How can i use many pages

How can i use many pages?

any icons

Notifications are disabled
Reason: DisabledForApplication Please make sure that the app id is set correctly.
Command Line: C:\web\teosofia\node_modules\node-notifier\vendor\snoreToast\snoretoast-x64.exe -pipeName \.\pipe\notifierPipe-41459ce9-7761-43d4-9c25-e9ce51834ef2 -p C:\web\teosofia\node_modules\webpack-notifier\logo.png -m "Error: ./assets/styles/_app.scss
ModuleBuildError: Module build failed (from ../node_modules/sass-loader/dist/cjs.js):
SassError: File to import not found or unreadable: ~bootstrap-icons.
on line 17 of src/assets/styles/_app.scss

@import "~bootstrap-icons";

[email protected]: The engine "node" is incompatible with this module. Expected version ">=4 <=9"

yarn install v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=4 <=9". Got "15.3.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

can you resolve it , thanks.

mixin image

mixin catalog-item(img)
img(src=require=img)
.........

+catalog-item( 'images/catalog/catalog2-01.png')

does not work, and does not build correctly

but the full link works, but builds incorrectly

+catalog-item( '/assets/images/catalog/catalog2-01.png')

Inject JS and CSS in subpages

Problem

The generated build of this starter works great in services to host static websites like Netlify, Digital Ocean, etc.

Buy if you try to upload the generated build to a shared hosting or if you simply do double-click in your local machine, the subpages are not taking the style nor the js because the paths of those that are being injected with HtmlWebpackPlugin are not dynamic for subpages only for the root page.

This is the generated build

The Home page which is index.html is the root page so the injections of CSS/JS are ./assets/js/app.css and ./assets/css/app.css.

The Contact page which is contact/index.html should have the injections like these ../assets/js/app.css and ../assets/css/app.css.

Expected behaviour

The Contact page or any other subpage should have the injections like these ../assets/js/app.css and ../assets/css/app.css

Is there a way to automate adding new pug pages to webpack?

This is a really nice starter file that mimics a lot of what I'm trying to do; however, coming from a similar Gulp boilerplate I've been using, I can't quite figure out how to properly account for new pug pages within the project. It seems like if I am to add/remove a new page, I need to rebuild webpack each time. Is there any way to automate this process? Adding watch: true, to webpack doesn't seem to solve for the problem.

Upgrade to Webpack 5 🚀

We need to upgrade this starter to Webpack 5 to generate faster and small builds. 🚀

vendor.XXXX.bundle.js big size

Empty project weighs 808KiB

soldiercorp / webpack-starter-pug-sass-es6-jquery Goto Github PK