Saturday 26 October 2019

How can I reduce the boilerplate for my UI projects? (Webpack+Pug+SCSS/LESS+...)

When I need to write a GUI for my node projects I like to stay vanilla instead of using big web framework.Usually I define the DOM using Jade or Pug, manipulate it using the standard browser JS API and tweak the style with SCSS or LESS.I then pack everything together (including node code and libraries) using Webpack.I'm a bit bothered by the amount of boilerplate that goes into every project with an UI though. In fact I always end up with:Many many extra dependencies (e.g. css-loader, node-sass, sass-loader, style-loader, pug, pug-loader, html-webpack-plugin, copy-webpack-plugin, to-string-loader, webpack, webpack-cli, webpack-dev-server and usually more).A 50+ lines webpack.config.js.Several NPM scripts in my package.json to start, build or test the web assets.Normally I copy and paste all this stuff from previous project and only modify what's needed. That takes several minutes, feels very repetitive, the package.json becomes all cluttered and I hate how much code is duplicated between my various UI projects. This happens even with the tiniest UI projects, while it's rare with pure Node.Would anybody have any ideas on how to remove all this boilerplate?

Submitted October 26, 2019 at 11:43PM by RedditWideWeb

No comments:

Post a Comment