Upgrade to webpack 5

Hi!

I was going to post this in GitHub but I think it is better here.
Would you accept a PR to upgrade to webpack 5?

Cheers!

Iā€™d say post to github (raise an issue with the offer of the PR) or the appropriate slack channelā€¦

webpack5 is brand new - so it could be a stopper for people at present as the whole eco system has to catch upā€¦

say I do phx new (that includes webpack5), and then want to drop in a react SPA, Iā€™ll run into webpack5 issuesā€¦ so I would probably say some 6 months, before the entire system has caught upā€¦

(that said a PR, showing how simple/complex the upgrade is would be awesomeā€¦)

2 Likes

Will create it then :slight_smile:

1 Like

just be to clear I have no saying in PR/merging for phoenix, but from experience there is a philosophy of keeping the phoenix webpack config as simple/minimal as possible, so strive for that, and go for minimal changes/complexity/featuresā€¦

2 Likes

@montogeek I could assist the PR.

hard-source-webpack-plugin could be removed in my understanding with webpack v5.
In dev.exs --watch-stdin needs to be replaced with --watch + --watch-options-stdin.

In case for keeping it as simple/minimal as possible,
I would propose to replace additionally within package.json:

  "repository": {},
  "description": " ",
  "license": "MIT",

with

"private": true,

Very opinionated, as I think webpack is to verbose,
I always also add --stats errors-only for deploy
and --stats minimal for development to the webpack commands.

1 Like

Well, from my recently experience with webpack 5, when I replaced --watch-stdin to --watch --watch-options-stdin then watching files for updates stopped working. For instance, when I changed some content of css/scss/ā€¦ no compilation happened. So I ended up only with --watch, but a few deprecation warning shown during compilation. Also if you use mini-css-extract-plugin you have to add publicPath. In my case was successful

...
test: /\.(sass|scss|css)$/,
use: [
  {
    loader: MiniCssExtractPlugin.loader,
    options: {
      publicPath: '/',
    }
  },
...
1 Like

Wepack 5 breaks the way I was chunking my file names. :frowning:

Specifically, Output.chunkFilename is dead, hard-source-webpack-plugin is broken
And Iā€™ve had to fix the way I bundle wasm and how I resolve two libs now that they donā€™t include the core nodejs libs.

At the end of the day Output.chunkFilename has prevented me from fully upgrading because Iā€™m not sure how to still bundle out my vendor.bundle.js and it now looks to just be broken.

I really hate webpack.

2 Likes

I wonā€™t work on this, discouraged by these statements:

I really hate webpack.

Feel free anybody to pick it.

I think you should be encouraged rather than discouraged! I think many of us have been frustrated with webpack from time to time and that frustration can result in saying something without thinking about the consequences. I personally find it difficult to work with. But it is an essential part of modern web apps so Iā€™m delighted that someone is putting their hand up to smooth out the bumps of a version upgrade.

6 Likes

Imagine you lived in a world where everyone massaged everyoneā€™s ego because everyone was too sensitive to say what they really feel. Yeah, I hate webpack, Who fucking cares. And guess what, Itā€™s possible to make bad software and itā€™s possible that software causes real pain for their users. Any good dev knows the first rule to good design is to be empathetic so if anything Iā€™m doing the devs of Webpack a favor by not sugar-coating how painful the process currently is. That should be in its self an indication that more energy really should go to identify the problems they cause for their users otherwise they may not have users to care anymore. And if you are so sensitive that the mention of dislike persuades you from trying then boy you are in the wrong industry. Everyone will hit these points in their dev career, try to move past the small talk and not be so squishy.

Also in my context Iā€™m not using the default Phoenix webpack config, because I like to chunk out my vendor and my app into separate files which is where I currently hit the wall. So your efforts will not be likely impacted by the issues Iā€™ve identified.

10 Likes

Iā€™ve prepared a PR now ā†’ https://github.com/phoenixframework/phoenix/pull/4054

5 Likes

I think this is a good change an we can probably apply it regardless of webpack 5. :slight_smile:

4 Likes