from Hacker News

Webpack 5

by marksamman on 10/10/20, 8:12 PM with 175 comments

  • by jebronie on 10/10/20, 8:48 PM

    "There is a good chance that upgrading fails and you would need to give it a second or 3rd try."

    Sad that this has almost become the norm when developing in the modern javascript ecosystem. I dread touching those projects and creating one even more because stuff just rots away and your app might break in days, weeks or If you are lucky months. I'm sure there are better developers out there that can handle all of this and know how to avoid it, but a bozo like me does not. This is actually causing me stress irl.

  • by runarberg on 10/11/20, 1:00 AM

    Reading through the comments here has been predictable. A lot of people complaining about the complexity of the front-end ecosystem. Too many tools, to much configuration, etc.

    I’d like to say that you don’t need that complexity. If you just want to write a dumb front-end you don’t need typescript, you don’t need babel, you don’t need pug, you don’t need webpack, etc. If these things bother you, just skip it.

    I always start my websites with a simple index.html file and run a `python -m http.server`. That is it. Modern JavaScript has a really good module system that works in all major browser (even Edge), and node. If you want to write type safe JavaScript you can write your types as doc comments and have typescript check it without bundling or compiling. You literally need only two tools to write a website: a browser and a text editor.

    I’m not here to tell you that people shouldn’t use these complex tools. Many people configure their front-end environment just fine with webpack, babel, typescript, etc. If they work better that way, that is fine. But if that bothers you, simply don’t do it. There is no reason for you to complain about it.

  • by bichiliad on 10/10/20, 10:01 PM

    I have to sing some praises for Webpack for a second. I work at a company with a large (> 10k files) old (> 10 years) JS codebase. It used to rely on a home-grown build tool, but making our builds both fast and modern took the time of multiple full-time engineers. Webpack isn't "fast" like Rust is fast, and it's not old enough to be as well-documented or understandable as I'd wish, but:

    1. it is flexible enough to fit all of our weird edge cases.

    2. it has a really solid community of people working on it.

    3. it made adopting new features like TypeScript extremely simple for us.

    I don't see us upgrading from 4 to 5 eagerly (at least until it's been production-proven), but I'm excited about this release, and I love all the hard work that's gone into it. Congrats to the team — it's no small feat.

    Edit: formatting

  • by anderspitman on 10/10/20, 11:27 PM

    The past year or so I've moved almost exclusively to backend at work (from Vue frontend) and simultaneously switched to vanilla JS for all new side projects. For those I use native ES modules heavily for internal code, and use very few external dependencies and import them as global scripts like a heretic. Heck I often don't even use npm for node projects anymore.

    For my latest project I'm even trying to make the entire interactive UI without any JS. I've sadly never done this.

    The sense of relief getting out of "modern" JS has been palpable. No more build steps. No endless dependabot PRs. No painful dependency updates. Just good clean fun development.

    There are tradeoffs. vdom frameworks really can add a lot of productivity vs hand-coding dom updates. But if I really need it I can use something like Mithril which still doesn't require a build step.

  • by acemarke on 10/10/20, 8:53 PM

    Next.js 9.5 added opt-in support for Webpack 5:

    https://nextjs.org/blog/next-9-5

    and looks like Create-React-App plans to support Webpack 5 in an upcoming CRA 4.1 release (4.0 is in alpha now):

    https://github.com/facebook/create-react-app/issues/9613#iss...

  • by anuila on 10/10/20, 11:11 PM

    Version 5 and this tool still has absolutely awful UX.

    I have no problem configuring Webpack, but it's ridiculous that:

    - it needs two plugins to generate CSS files [1], when the homepage lists it as one of the supported outputs in front and center; [2]

    - it needs a plugin have a non-trash output log. [3]

    Parcel was supposed to fix the situation, and in many cases its UX is an order of magnitude better, but in exchange it brings a slew of unfixed bugs in the most simple projects that lightly sway from the base usage.

    Maybe in 2030 the JS community will have figured something out.

    1: https://webpack.js.org/guides/asset-management/#loading-css

    2: https://webpack.js.org

    3: https://github.com/GoogleChromeLabs/size-plugin

  • by rmrfrmrf on 10/10/20, 11:51 PM

    I saw this headline and kind of winced because I just finished doing battle with our webpack config(s), but top-level await, automatic Worker entry points, cjs tree shaking, and import.meta support are huge! I'm also grateful for the removal of Node polyfilling -- it tends to just add confusion when you're testing across different environments.
  • by spiderjerusalem on 10/10/20, 10:27 PM

    The last time I tried to bump webpacker from 3 to 4 at <dayjob> was absolute hell. The fancy chunk splitting logic was spewing out non-deterministic bundles across different machines in our infra. Took a lot of deep digging in the internal graph representation to find the root cause.

    I gave a local related meetup talk, slides here.

    https://vheis.su/slides/curing-webpack-cancer/#11

  • by Waterluvian on 10/10/20, 8:54 PM

    I’m scrolling and scrolling waiting for a paragraph that tries to sell me on why I’d bother and risk upgrading. I think the best I got were patch notes.

    Any good reason to upgrade?

  • by emilsedgh on 10/10/20, 11:14 PM

    We've been using Webpack for a number of years now with our massive webapp.

    A few months ago we started using esbuild for our development setups. Build times went from ~6 minutes to ~1.

    This is a sweet spot for us as esbuild is performing really well and made our development much easier. we still rely on webpack for our staging and production builds.

    The reason for this is esbuild doesn't support a variety of production necessary features (transpiling to older ES, uploading bundles to S3, etc)

    But I'm very happy with our "esbuild for development, webpack for deployments" process.

    Any reason other people are not taking a similar approach?

  • by ENGNR on 10/10/20, 10:25 PM

    As someone who fought battles with webpack and webpack 2, I’ve since been pleasantly surprised that each upgrade has just gotten simpler and more stable, and I can progressively delete more of my own code as the features get built in. Big thanks to the maintainers!
  • by nikivi on 10/10/20, 9:22 PM

    Eventually the packing part can be done in a compiled language. https://github.com/evanw/esbuild is very fast at doing some things already but not others.

    And I guess webpack wins because you can configure it to do anything easily already? And with compiled languages 'configurability' is hard to do?

  • by simonw on 10/10/20, 10:12 PM

    I've been putting off learning Webpack for far too long.

    Can anyone provide some kind of a syllabus to help me figure out what there is to learn about it, starting from almost no knowledge at all?

    I feel like it's a critical enough piece of modern web infrastructure that it's worth me taking the time to fully understand how to use it and what it's capable of.

  • by andy_ppp on 10/11/20, 12:57 AM

    I was joking just the other day, could you imagine if someone you worked with came up with the set of design decisions that required webpack + Babel + node_modules ? You would think they were insane and laugh them out of the design meeting, even the company. Maybe it’s time for a reframing - which problem are we trying to solve?
  • by ssijak on 10/11/20, 7:53 AM

    Coding something in java/kotlin after months or years in only browser world is so relaxing. Maven (or Gradle) just works and upgrading packages is never a scary thing. And if update does break something, it is usually a small API change in some library which IDE will happily highlight for you with a red squiggly line. And what I love about Java is that you have very stable libraries for everything, where as in javascript world of you don’t touch it for a year your already a dinosaur.
  • by SimeVidas on 10/10/20, 9:44 PM

    If anyone at webpack reads this, consider adding an RSS feed to your blog.
  • by __s on 10/11/20, 12:13 AM

    Doesn't work with new JSX transform of react & babel if you have "type": "module" in your package.json

    https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-...

    https://github.com/webpack/webpack/issues/11467

    Seems rules: {test:/\.m?js$/,type:'javascript/auto',resolve:{enforceExtension:false,fullySpecify:false}} fixes

    Also nothing in this doc mentions that webpack -p no longer works, instead you need to spell it out webpack --mode=production

  • by asdf-asdf-asdf on 10/11/20, 11:24 AM

    it is really frustrating to read infinite variations of the comment "javascript development is too complicated", "it is much simpler in other languages" etc.

    yes, it is complicated. the problem is, there are certain constraints that we just cannot ignore: we want to write code in a "normal", efficient way (code organized in namespaced modules, perphaps static typing etc.), but we need it to be executed by the web-browser, maybe an old version of a web-browser. so we need solutions that work with these constraints.

    if you know about simpler solutions, i'm very interested hearing about them. but please note, it has to work with those constraints, so ideas like "just write a native application" does not help.

  • by sabellito on 10/10/20, 11:53 PM

    I will forever swear by parcel-bundler. That thing takes so much of the suck out of web dev.
  • by Jarred on 10/10/20, 9:37 PM

    The incremental build time improvements look great.

    Did the cold build times get slower? This tweet shows a benchmark that makes it seem like cold build times got slower in Webpack 5

    https://twitter.com/evanwallace/status/1314121407903617025?s...

  • by brodock on 10/11/20, 3:24 PM

    I wish we all were using swc.rs by now. Last time I checked it was still relying on nightly rust, but it seems not anymore. This we I saw someone complaining that webpack-dev-server was taking 4.5GB (not a mistake) to "concatenate strings for older browsers" in a fairly large codebase. There is just no excuse for that.
  • by kumarvvr on 10/11/20, 1:42 AM

    I would encourage everyone to try out Blazor. It's shaping up to be quite nice and is great for a lot of apps.

    The paradigm and implementation is top notch. And its orders of magnitude better than programming in JS.

    If you are doing data intensive apps, complex data handling and all, doing it in C# is a pleasure.

  • by preommr on 10/11/20, 2:10 AM

    tl;dr Try parcel

    I've had some really horrible experiences with webpack.

    When I first started with it, it was daunting. Seriously, just look at the docs, it's pages upon pages of complex behavior. Some of it fairly unintuitive.

    It took me days to dive in, get used to it and kind of know what I was doing, and then promptly forget everything about I knew over the months/years.

    Everytime I have to dive into the webpack related config, I basically set aside a whole and feel a deep sense of dread. This isn't normal.

    Also, Webpack has horrible UX. At first I thought that was because it's complicated and covers a difficult problem space. But then I used parcel, which is leagues better in terms of usability. I absolutely love parcel and think it's so much better overall. Unfortunately, their team is much smaller and much less used so webpack is a couple more features that make it more "stable". Well actually, it goes both ways, but most of the time parcel has some very small error that webpack might not.

    Whic is why I basically run both at the same time - parcel for it's speed and ease of use, webpack to catch a lot of errors (like those outputted by ts) that for some reason parcel (1.x at least, I think 2.x is coming soon) doesn't catch.

  • by bostonvaulter2 on 10/11/20, 12:08 AM

    Am I the only one who was annoyed that they made the beta docs the main docs before version 5 was even released?
  • by WesolyKubeczek on 10/10/20, 10:46 PM

    So I guess it's safe now to try migrating a project from Webpack 3.x to 4.x?