Help with Web Development Workflow

[adam118]

Hey everyone.

I like to think of myself as a somewhat beginner/intermediate web developer. I have been involved in building web applications for a long time but have found myself working in outdated ways which I’d like to put right. I’m starting to explore more reliable and efficient options regarding web development workflow and it’s best practices. Specifically, I have been looking at the fundamentals of webpack and how it can make setting up and working on web apps fairly seamless.

So far the work-through examples of webpack I have come across are great but being examples, they obviously have a relatively simple setup as to not overwhelm. By that, I mean that usually there is a very basic file structure of src, dist, a single index.html file etc.

However, in my experience, I have tended to use a CMS (most recently, CraftCMS) which naturally come with a more complex file structure with a lot more to consider than a single html file. I suppose my question is how complicated is it to merge the CMS package into a webpack controlled application? For those out there that use Craft CMS, do you tend to use a tool like webpack at all? Or is webpack only suited to certain types of projects?

I’d like to try to use something like webpack or alike to make working with Craft even smoother. Any advice or recommendations would be much appreciated.

*This is my first post so I hope I have categorized it correctly. General Web Dev seemed appropriate.

[m3g4p0p]

@adam118

However, in my experience, I have tended to use a CMS (most recently, CraftCMS) which naturally come with a more complex file structure with a lot more to consider than a single html file. I suppose my question is how complicated is it to merge the CMS package into a webpack controlled application? For those out there that use Craft CMS, do you tend to use a tool like webpack at all? Or is webpack only suited to certain types of projects?

Hi @adam118, webpack is in the first instance a module bundler. The HTMLWebpackPlugin (generating a single or few HTML pages) and the dev server (with hot module replacement etc.) are indeed mostly useful when developing an SPA, but there are many other aspects useful in any application context. This includes – beyond actual module bundling – optimizations such as code splitting, asset handling, babel / typescript integration, having your tests and linters run along etc. etc. The generated output can the be included in your CMS as usual.

And when developing for a CMS, we usually still have a simple SPA-like setup that basically acts as a component library where we can develop our components in isolation. To what extent such an approach is viable depends on how deeply your FE code is to be integrated in the CMS though, so YMMV here. :-)