DEV Community

CodeCara
CodeCara

Posted on

Attack of the killer Webpack

(Note that I didn’t have much time this week, so didn’t make as much progress as I had hoped).

Things I've worked on/completed since my last post…

- Finished Webpack theory

- Started the Restaurant Page

Things that didn't go quite so well...

I felt like I could have re-read the Webpack material eight times and still have been confused. It did not help that I was doing half an hour here and there which almost meant re-starting each bit from scratch each time.

Predictably (judging by past experience), very little of the theory went into my head, in spite of a lot of it making sense as I was reading it. Before starting the project, I gave the theory one last look over and some of it did make more sense this time.

Although I did not feel like I had a great grasp of this before starting the project, I just started it and went through the instructions, asking questions when things were unclear.

I admit to being still confused with some of the commands, especially the ones that need to be run each time you open VS code, but I am trying not to dwell on this too much and just hope that it will become more automatic over time.

Things that went well...

A few things became clearer as I went through the project and referred back to the Webpack material, such as which files are created when (the json file and the webpack.config file for example) and what I might expect to see/find in them.

So far, I am enjoying seeing how the Restaurant page fits together, working with modules, creating all the elements using JS etc.

I found myself using a tool/trick which I learnt from another Odinite a few months back which involved resetting innerHTML to an empty string in order to remove the contents of a page - I was actually trying to remove the display of one page and replace it with another in order to create a ‘tab mechanism’ and this html trick popped into my head and worked perfectly for what I needed. I was delighted to have remembered this #small_victories.

Things I've learnt/need to improve on...

The only way I will get better at Webpack is by using it practically in projects and trying to pay attention to what is going on in the files.

While creating DOM elements in the projects, I became aware of something which I had previously not picked up on up to this point - the fact that when innerText is assigned to a parent node, all child nodes are removed and replaced by only one new text node - this created a problem in the way I had my DOM elements set up and made me realise that I need containers to hold text in the DOM, as those containers will not have an innerText property and therefore, this problem won’t arise.

Plan for the forthcoming week...

To finish the Restaurant project.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay