Also, funny experience: asked few senior FE devs how to configure React, webpack and TS manually, absolutely nobody could do it.
Also, funny experience: asked few senior FE devs how to configure React, webpack and TS manually, absolutely nobody could do it.
That's why I like to use vanilla JS as much as possible. It will be maintainable years later.
After a recent FF upgrade, it balked at JS that worked fine for years ... on occasion, not always ...because: navigator.onLine === true, internet.connection === false.
Not every front-end developers learn the internals of the tool they chose, like create-react-app. Most of them settled down if the solution "just work".
Be careful of these statements, you have to understand why a person says X is hard. The OP stated he did extensive work trying to get it to work and found it difficult.
You posted one link out of thousands. When talking about these things - its not like there's a problem with one solution.
There's one problem with thousands of answers that are frustratingly close to correct, but not correct.
That's why X is hard.
If people are getting stuck because they're trying to get into something by following a "Frontend stack in 10 minutes!" blog post that introduces 10 dependencies and aims to skip all the actual learning bit in the interest of "getting up to speed" then they fucking deserve to get stuck.
There's only thousands of answers because everyone is too stupid to just go and read the obviously correct one and thousands of people try and exploit that for some industry cred or something.
However your view is also correct. They're too overwhelmed with the capabilities and complexities of webpack that they missed how there are hundreds of working webpack configuration for react etc, that they can use as reference, or how easy it is to be configured when you follow the tutorial and know what is babel, loader, presets, etc.
I don’t think that’s unreasonable.
What’s unreasonable is this culture in web dev that you shouldn’t have to read the docs!
Also Parcel is easier by a factor of 10, skip Webpack entirely.
So it isn't hard - it's just not easy and it's time consuming. Wait, what?
Mostly it takes the willingness to learn and patience to recognize that it's a whole class of knowledge, separate from actually writing a javascript app.
But snark aside - good point with the reference to Parcel. I haven't had time yet to delve into the new generation of JS tooling that have come up in the last few years, but yeah - its approach looks much saner. (vite also looks promising.)
Its' just...sigh maybe I'm just a bit jaded WRT to project age/maturity. I mean, it's only 4 years old! At least it has a V2 already. ;)
If you don't want to dedicate a few hours to learning Webpack and your goal is to just set up a basic React + Typescript app then I'd strongly encourage using an opinionated bundler that provides standard templates for setting up such a project. Vite is very good for that https://vitejs.dev/guide/#scaffolding-your-first-vite-projec... you should be able to just type a few lines in the shell and be up and running.
The contrast is other programming language ecosystems. Once you understand how they look up modules from which to import things you need, you are set and can deliver a working program. Not so in JS. Multiple half backed module systems and for a long long time no proper support for modules in the browser, so that things like requirejs had to be shipped, in order to have modules working. All of that is a huge crutch and hack. Also it is mostly unnecessary. It is not like JS apps do sooo much more than traditional desktop apps. It is their dependencies, which make the load big. That in itself is a problem, which then creates the problem of "Oh I must minimize my JS files!" and that creates the need for a tool and then we get to a place, where we have things like webpack, which you configure for a day and no guide does exactly what you want to do in your project. You might even find out, that webpack cannot do what you need it to do, because of being "opinionated". Then you might look for the next tool and the cycle starts again. I have experienced very little of that nonsense in any other ecosystem. Most do not deal with the same problems, because they avoided getting into those problems in the first place and they do not have to deal with a badly designed language as a basis.
In the frontend development world you might even run into people integrating things like webpack into projects needlessly, say a plain JS project of a few files under 100kB, just because they always do, and because of silly project standards they have. In some way we were better off when JS was simply in a script tag and you had to put the script tags in the correct order. None of the webpack and similar tool overhead was there. Heck, those tools even seem to encourage people to include more and more stuff into their projects, because they think, that webpack and similar tools will magically fix it all and make all their code small in size when delivered. Over time this grows into multiple megabytes bundled minified unreadable JS crap.
Sure, being restricted to a single paradigm can simplify things in this regard but it comes with its own set of problems. I've used build systems and package managers for C/C++, Nim, D, Python and a number of others and they all come with their own headaches, learning curves, bugs, and WTFs. Software is never perfect, documentation is incomplete and inaccurate and sometimes shit just doesn't work the way you need it to. You can write terrible code in any language, if you need proof just do a filtered search on GitHub for your language of choice and page through some of the projects. I don't think JS is any more at fault than the rest, it just has more people learning it and hacking things together so you see more of it. It's not the programming language's fault if you write bad code, that's always up to your own proclivities and time constraints so I don't think we should try to pin it on the existence of such and such a module or library or the design of the package manager.
The hugely positive side is that there are a large number of people in the JS ecosystem actively trying to solve these problems and also educating others on how to solve their own. It's a bigger tent than any other programming language I've used, more active, welcoming, less judgemental and more beginner friendly. For people just beginning programming I'd still recommend starting with JS for those reasons.
If you need more (e.g. TypeScript/JSX/CSS support), You will need some third-party loaders or plugins. webpack itself is just a JavaScript bundler.
So it's "You just need to go through the webpack Concepts section"...except if you want to actually do some work with it.
See, that's the thing:
If like OP you are an experienced developer freshly coming to web frontend development, the Concepts pages of the webpack docs will tell you very little that you'd find unfamiliar. It's stuff that you've seen a variation of in countless other build systems. (At least that's how it was with me all those years ago.)
But as the docs themselves say: "Plugins are the backbone of webpack". And that's where Pandora's box opens...and where the designation as "just a JavaScript bundler" becomes ridiculous.