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.

Hi there 🖖

My name is Edgardo Ramírez León.

Highly skilled Senior Software Engineer with over 12 years of experience in full-stack web and mobile development.

A team-oriented professional with strong technical leadership, adept at solving complex technology problems with creative architectural solutions.

I have a great eye for design, producing precise interfaces using the Pixel Perfect technique.

📫 Feel free to contact me if you need any help :)

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

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.

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')

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";

Upgrade to Webpack 5 🚀

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

How can i use many pages

How can i use many pages?

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

vendor.XXXX.bundle.js big size

Empty project weighs 808KiB

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..

[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.