feat!: support and use webpack 5 as default #6060

haoqunjiang · 2020-11-16T07:37:37Z

Work-in-Progress

TODOs

Later

Mocha: Needs to fix Vue 3 setup (could be in another PR, as it has been failing for a while and depends on a vue-loader patch)
Mochapack's webpack 5 support is still work-in-progress Add support for webpack v5 sysgears/mochapack#83
style-related loaders need to be updated for better support of webpack 5 (there's basic support in the currently used versions, though)
webpack-dev-server 4 is in early beta, it provides better compatibility with webpack 5. But the current version is still usable, so no hurry in updating it.
Global serve/build: Tests are ignored for now, these features will be removed in another PR
Preload plugin: Should support html-webpack-plugin v4. Not high-priority, but should be easy

Note

need to update many of the plugins' peer dependencies requirements when the first alpha comes out.
should think about how to upgrade to html-webpack-plugin v5 in the future webpack 5 <-> html-webpack-plugin 5 jantimon/html-webpack-plugin#1527

What kind of change does this PR introduce? (check at least one)

Does this PR introduce a breaking change? (check one)

Yes
No

Other information:

Work-in-Progress TODOs: - Support opting-out to webpack 4 - Document the breaking changes - Fix the few remaining failing tests - Fix Vue 3 test setup (maybe in another PR) - Preload plugin should support html-webpack-plugin v4

webpack 4 compat is too cumbersome and let's forget about that for now

This avoids incorrect hoisting caused by vuepress sharing the vue-loader dependency, which falsely injects webpack v4 into the dependencies of vue-loader v15. Also added a hot fix for vue-cli-plugin-apollo

workbox-webpack-plugin upgraded from v4 to v6 alpha. Need further testing to make sure it works correctly. But for now, at least the existing tests have passed

See jantimon/html-webpack-plugin#1048

from https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/ba3dbd71cec7becec0fbf529833204425f66efde/src/parseUtils.js to https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/4abac503c789bac94118e5bbfc410686fb5112c7/src/parseUtils.js excluding some of this commit: webpack-contrib/webpack-bundle-analyzer@c35bda3#diff-cc250993338f2c875d952782d3e6e5465c510ee355a68adb9f8f1ccd5d446823 as I don't find how this part of code logic fits into the DashboardPlugin. We may need a further refactor later.

In webpack 5, compilation.asset is a SizeOnlySource, so we have to read the source directly from the fs

…or webpack 4

It's a little bit tricky to update this plugin. So we'll reconsider it later.

note: dev server hmr is not working correctly

haoqunjiang · 2020-12-03T07:08:47Z

All tests are passing. I think it's ready for merge now!

faraz5040 · 2021-08-16T10:37:13Z

@sodatea What's the status of webpack-dev-server v4 support?

feat!: support webpack 5

ce5125f

Work-in-Progress TODOs: - Support opting-out to webpack 4 - Document the breaking changes - Fix the few remaining failing tests - Fix Vue 3 test setup (maybe in another PR) - Preload plugin should support html-webpack-plugin v4

haoqunjiang added PR: Breaking Change PR: New Feature labels Nov 16, 2020

haoqunjiang added 3 commits November 16, 2020 21:08

feat: support loading webpack from the user project

d51e8e8

fix: add error handling for detecting webpack dependency

ee8ae18

fix: allow .mjs files to be resolved without specifying the full path

fa51eb2

haoqunjiang mentioned this pull request Nov 17, 2020

Plan for Vue CLI v5 #6064

Closed

18 tasks

haoqunjiang added 23 commits November 19, 2020 15:52

chore: Merge branch 'dev' into feat-webpack-5

3c212fe

fix: add babel-loader to ts plugin dependencies

413aa31

fix: force upgrade all deps to webpack 5 for now

33213e6

webpack 4 compat is too cumbersome and let's forget about that for now

ci: skip global service testing

5542e35

fix: fix eslint errors for wdio plugin

f2ebf83

test: fix jest args order

920db51

fix: use vue-loader v16 as the main vue-loader dependency

7c672bd

This avoids incorrect hoisting caused by vuepress sharing the vue-loader dependency, which falsely injects webpack v4 into the dependencies of vue-loader v15. Also added a hot fix for vue-cli-plugin-apollo

fix: fullySpecified option only available in webpack 5

5185a69

fix: use full dependency path

deb3810

fix: use resolutions to force webpack 4 for mocha plugin

d6c4ea1

test: should not use file:// protocol now that we have verdaccio

afa05b2

test: yet another dirty fix for verdaccio testing

b5ba3c5

test: quick fix for mocha e2e test

8a04d92

test: fix cmd arg

6e1b2f6

fix: add @vue/server-renderer to devDependencies

babd417

feat!: upgrade pwa plugin to work with webpack 5

f35ae5b

workbox-webpack-plugin upgraded from v4 to v6 alpha. Need further testing to make sure it works correctly. But for now, at least the existing tests have passed

refactor: minify option is enabled by default for html-webpack-plugin 4

24f5d4a

See jantimon/html-webpack-plugin#1048

test: remove core-js-pure from test project name to avoid false positive

85bf493

test: webpack 5 now use hash for async chunk outputs instead of numbers

43a8272

test: move ts+mocha test to e2e group

bed72d4

chore: Merge branch 'dev' into feat-webpack-5

61d7424

ci: add webpack 4 tests to circleci

9480af2

chore: pnp plugin only required for webpack 4

4f16452

docs: more instruction on webpack 5 upgrade

feb94d1

IlCallo mentioned this pull request Nov 25, 2020

Webpack 5 support quasarframework/quasar#8102

Closed

36 tasks

haoqunjiang added 21 commits November 26, 2020 16:27

chore: add comment [ci skip]

994b11f

fix: read the asset source from outputFileSystem

37b4b42

In webpack 5, compilation.asset is a SizeOnlySource, so we have to read the source directly from the fs

fix: fix progress data

6494c70

chore: Merge branch 'dev' into feat-webpack-5

596f5f3

chore: update lockfile

71b9f0e

test: should test ts-unit-mocha project outside the monorepo

4954ccc

fix: fix windows import path

b95cbc2

ci: ignore global service tests in appveyor too

97a1849

feat: use module-alias if user don't or can't use force resolutions f…

94d609e

…or webpack 4

feat: prefer "resolutions" over module-alias whenver possible

a4e3cf5

test: don't skip vue 3 tests

696811a

chore: clean up

78061d7

docs: document the changes

e46fda2

chore: add terser-webpack-plugin v4 back

3adc207

It's a little bit tricky to update this plugin. So we'll reconsider it later.

chore: update webpack-merge

1c4da4d

chore: Merge branch 'dev' into feat-webpack-5

747b23f

test: use names, instead of id to find the app chunk

ab3e4cb

fix: properly test webpack 4

e685e66

note: dev server hmr is not working correctly

fix: add fix for webpack 4 dev server HMR

2fb6bb3

test: remove .only

da4df86

haoqunjiang merged commit 2dbe0be into vuejs:dev Dec 3, 2020

haoqunjiang deleted the feat-webpack-5 branch December 3, 2020 07:16

haoqunjiang restored the feat-webpack-5 branch December 3, 2020 07:17

merceyz mentioned this pull request Jul 3, 2021

chore(compat): update extensions list yarnpkg/berry#3082

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat!: support and use webpack 5 as default #6060

feat!: support and use webpack 5 as default #6060

haoqunjiang commented Nov 16, 2020 •

edited

Loading

haoqunjiang commented Dec 3, 2020

faraz5040 commented Aug 16, 2021

feat!: support and use webpack 5 as default #6060

feat!: support and use webpack 5 as default #6060

Conversation

haoqunjiang commented Nov 16, 2020 • edited Loading

TODOs

Later

Note

haoqunjiang commented Dec 3, 2020

faraz5040 commented Aug 16, 2021

haoqunjiang commented Nov 16, 2020 •

edited

Loading