Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack 5 support #8102

Closed
22 of 36 tasks
IlCallo opened this issue Nov 25, 2020 · 17 comments
Closed
22 of 36 tasks

Webpack 5 support #8102

IlCallo opened this issue Nov 25, 2020 · 17 comments

Comments

@IlCallo
Copy link
Member

IlCallo commented Nov 25, 2020

https://webpack.js.org/blog/2020-10-10-webpack-5-release/
https://webpack.js.org/migrate/5/

webpack 5 is out and it's time we go way down into that rabbit hole :D

We'll use this issue to keep track of everything.
We plan to ship Quasar 2 with Webpack 5 support, or add it right after with a @quasar/app update, but could push back the upgrade to Quasar 3 if we find out there are too many breaking changes for devs this is needed as some webpack 4 issues are pretty severe

If anyone from team or community wants to jump in and point out something we are missing, both on current issues or new features we can leverage, please do :)

Let's avoid spam and "+1", we are going to delete/hide those comments

Existing issues due to webpack 4

New feature we want to leverage from webpack 5

Loaders to upgrade

  • autoprefixer Latest (v10.0.4) supports new plugin structure of postcss (v8). Current is v9.8.6
  • compression-webpack-plugin supports webpack 5 since v5, we already ship with v5.0.1. May be a good idea to update to latest anyway (v7), which drops support for webpack 4
  • copy-webpack-plugin supports webpack 5 since 6.0.4, we already ship with v6.3.2
  • css-loader supports webpack 5 since 3.3.2, we already ship with v3.6.0. May be a good idea to update to latest anyway (v5)
  • eslint-loader is deprecated and apparently doesn't support webpack 5. Replacing with eslint-webpack-plugin (see Replace deprecated eslint-loader by eslint-webpack-plugin facebook/create-react-app#9751), which in turn forces us to use at least ESLint 7
  • file-loader supports webpack 5 since 5.0, we already ship with v6.2.0 which is latest loader version
  • fork-ts-checker-webpack-plugin: we are on v4 right now, we need to upgrate to v6, webbpack 5 is there since v5 upgraded to v6
  • friendly-errors-webpack-plugin have not released a new version since 2018, and is currently not compatible with webpack 5, at least not when installed via NPM. There a fork we could use which supports v5
  • html-webpack-plugin: we are on v4.5 right now, v5 is currently in beta and will have webpack 5 support (and drop webpack 4 support)
  • mini-css-extract-plugin supports webpack 5 since 0.11 but many improvements to the support has been made in 1.x releases (latest is v1.3.1), we currently ship with v0.10
  • node-loader supports webpack 5 since 1.0, we already ship with v1.0.2 which is latest loader version
  • optimize-css-assets-webpack-plugin won't support webpack 5, its readme suggests to use css-minimizer-webpack-plugin instead
  • postcss-loader supports webpack 5 since v4, we currently ship with v3
  • postcss-rtl Has not been updated to new plugin structure of postcss (v8). Recommend moving to rtlcss. Until we do that, we can rely on temporary fork (or create our own fork) which fixes the compatibility issues
  • pug-plain-loader (used in docs) not updated since years, webpack 5 status support unknown. Consider using this updated fork instead Updated in december to support Pug 3 and webpack 5
  • raw-loader (used in docs) supports webpack 5 since 4.0, we already ship with v4.0.0 which is latest loader version
  • sass-loader supports webpack 5 since 8.0, we already ship with v10.1.0 which is latest loader version
  • terser-webpack-plugin supports webpack 5 since v4.2.1, we ship with v4.1.0. May be a good idea to update to latest anyway (v5.0.3)
  • ts-loader supports webpack 5 apparently since v8.0.1, we ship with v7.0.5. We already ship with v8, we may consider upgrade to v9 (drops webpack v4 support and require node v12).
  • url-loader supports webpack 5 since 3.0, we already ship with v4.1.1 which is latest loader version
  • vue-loader supports webpack 5 since v15, we already ship with v15.9.5 which contains latest fix for it, nothing to do here
  • vue-style-loader have not released a new version since 2018. Since it was created to support SSR, and Vue3 SSR support hasn't been finished yet, this actually makes sense. Many are starting to question if that loader is still useful, I'd say we'll only know when Vue3 supports SSR
  • webpack-bundle-analyzer supports webpack 5 since v4.0, we already ship with v4.1.0 which is latest loader version
  • webpack-chain somewhat works with webpack 5, but hasn't been updated to fully support it. Something may move in some months tho
  • webpack-dev-server already supports webpack 5, but have some issues which should be fixed in v4, currently in very early beta. We currently ship with v3.11
  • webpack-merge supports correct typings for webpack 5 since v5.3.0 (should be compatible even before that release), we ship with v4.2.2
  • webpack-node-externals supports webpack 5 since v2.5.0, we already ship with v2.5.2 which is latest loader version
  • workbox-webpack-plugin will support webpack 5 since v6 (currently in RC phase). We should ditch v5 support and update everything to use v6 only.
  • write-file-webpack-plugin should not be needed anymore since webpack-dev-server v3.1.10 which exposes a writeToDisk option. This dependency should be removed

Issues with webpack 5 migration

Related issues

Things which could be explored, but which aren't really "in-scope" for the migration

Additional context
Vue CLI still has not switched, but something is moving:

React is moving there too and have an exaustive list of stuff to upgrade and problems to solve:

Angular CLI already supports Webpack 5 as experimental (we could check if we can learn something from their code), and is discussing about Module Federation feature:

@Blfrg
Copy link

Blfrg commented Nov 29, 2020

Regarding:

pug-plain-loader (used in docs) not updated since years, webpack 5 status support unknown

I'm using a forked version because as you noted, it hasn't been updated for a while.
The proper version by Evan has a dependency error and doesn't work with pug v3.
See Other Packages in the forked readme for details.

This only depends on the latest version of loader-utils by webpack, so I believe it will be compatible.
I can test/confirm once ready to review.

@IlCallo
Copy link
Member Author

IlCallo commented Nov 30, 2020

@Blfrg thanks, updated into the initial post :)

@yusufkandemir
Copy link
Member

@IlCallo just a little update: workbox-webpack-plugin v6(stable) is released, and the latest version is v6.0.2.

@IlCallo
Copy link
Member Author

IlCallo commented Dec 8, 2020

Perfect, updated into the first post

@hawkeye64
Copy link
Member

hawkeye64 commented Dec 11, 2020

@IlCallo There is a temporary fork of postcss-rtl that's been upgraded to work with latest postcss plugin structure.
https://www.npmjs.com/package/@mjhenkes/postcss-rtl
I am thinking we may need to fork that (the form) ourselves and maintain a @quasar/postcss-rtl

@IlCallo
Copy link
Member Author

IlCallo commented Dec 11, 2020

I added this to the original post, but I'm not sure taking the burden of yet another package to maintain for ourselves is the right way...

@hawkeye64
Copy link
Member

I agree. I am using rtlcss, but Razvan says that doesn't handle all of our cases properly. It may be better to PR that package with what's needed. Right now I can't say I know what is missing from rtlcss, but it is actively maintained.

@haoqunjiang
Copy link
Contributor

FYI the vue fork of preload-webpack-plugin has supported webpack 5 https://github.com/vuejs/preload-webpack-plugin/releases/tag/v2.0.0
I've also maintained a fork of friendly-errors-webpack-plugin that has supported webpack 5 https://github.com/sodatea/friendly-errors-webpack-plugin/releases/tag/v1.8.0 (@soda/friendly-errors-webpack-plugin on npm)

@IlCallo
Copy link
Member Author

IlCallo commented Feb 16, 2021

Thanks! One or two out of the list then :D

@Blfrg
Copy link

Blfrg commented Mar 14, 2021

Regarding:

pug-plain-loader (used in docs) not updated since years, webpack 5 status support unknown. Consider using this updated fork instead

I was just reviewing my dependencies and noticed that back in December @sodatea merged the needed PR
for the orginal pug-plain-loader to work with pug v3.

So the original dependency can be considered reliable again, instead of the fork.

@IlCallo
Copy link
Member Author

IlCallo commented Mar 15, 2021

Thanks, updated in the initial list

@panhezeng
Copy link

html-webpack-plugin v5 has been upgraded to the latest stable version long ago .

@mariusa
Copy link

mariusa commented Apr 16, 2021

Just as a note, as vite support is also on roadmap: vite brings significant performance compared to webpack. After trying it, you might consider making vite a higher priority than webpack for 2.0 (speaking only from my personal experience; there could be roadblocks to using vite for other projects). Thanks for considering.

@rstoenescu
Copy link
Member

We need to first concern about our current user base and not leave them hanging with their current apps. Due to Webpack team not upgrading chokidar dependency for Webpack 4 we can't have apps correctly running on Node 14+ (which is LTS!).

We are aware of how good Vite is, which is why we've planned a Vite plugin and even a Quasar CLI based on Vite instead of Webpack. It will come, guaranteed. I'm about to finalize the Webpack 5 upgrade (a few more days and there's going to be a q/app release with it) and then it's Vite time!

@mariusa
Copy link

mariusa commented Apr 16, 2021

Mulțumesc, Razvan :)

@rstoenescu
Copy link
Member

"@quasar/app" v3.0.0-beta.16 will feature Webpack 5. Was hell upgrading everything (including our many of custom webpack plugins). But while I was at it, took time to also greatly improve and revamp the inner workings of q/app (and there are so many to list them here!). Get ready to rock'n'roll your apps with it!

@rstoenescu
Copy link
Member

Available through "@quasar/app" v3.0.0-beta.16 + Quasar v2.0.0-beta.13. Enjoy and please read the release notes! https://github.com/quasarframework/quasar/releases/tag/%40quasar%2Fapp-v3.0.0-beta.16

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

9 participants