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

feat(v2): Webpack 5, PostCSS 8 #4089

Merged
merged 157 commits into from
Apr 30, 2021
Merged

feat(v2): Webpack 5, PostCSS 8 #4089

merged 157 commits into from
Apr 30, 2021

Conversation

RDIL
Copy link
Contributor

@RDIL RDIL commented Jan 22, 2021

PR by @RDIL & @slorber

Issue: #4027

Released in 2.0.0-alpha.75


Breaking changes

As it's a major Webpack version upgrade, it is a breaking change and can require adapt things on your sites such as the configureWebpack of your custom plugins.

However, sites that do not have custom plugins and mostly use a basic config should be able to upgrade seamlessly.

Please report any issues otherwise.

Known issues:

Using persistent caching

Make your CI cache the node_modules/.cache folder across 2 CI builds, and the 2nd build becomes much faster.


  • Upgrade Webpack 4 to Webpack 5 + upgrade related libs
  • PostCSS 7 to PostCSS 8
  • Leverage persistent caching for a much faster 2nd build
  • Try to keep retro compatibility in most cases (breaking changes are normally all in libs, not Docusaurus)

If you get some deprecation warnings, please report them here with the stacktrace, by running NODE_OPTIONS='--trace-warnings' yarn build


Tested on a lot of sites with great success:

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Jan 22, 2021
@netlify
Copy link

netlify bot commented Jan 22, 2021

[V2]

Built with commit 867d034

https://deploy-preview-4089--docusaurus-2.netlify.app

@netlify

This comment has been minimized.

@github-actions

This comment has been minimized.

@anshulrgoyal

This comment has been minimized.

@RDIL

This comment has been minimized.

.eslintrc.js Outdated Show resolved Hide resolved
packages/docusaurus/package.json Outdated Show resolved Hide resolved
@github-actions
Copy link

github-actions bot commented Feb 11, 2021

⚡️ Lighthouse report for the changes in this PR:

Category Score
🟠 Performance 73
🟢 Accessibility 96
🟢 Best practices 100
🟢 SEO 100
🟢 PWA 95

Lighthouse ran on https://deploy-preview-4089--docusaurus-2.netlify.app/

@slorber
Copy link
Collaborator

slorber commented Apr 23, 2021

So, I tested this on a lot of sites (cf list at the top) and it seems to work great in most cases, just noted a few minor changes to do.

We'll likely do one last Webpack 4 bugfix release soon and then merge this PR next week.

@juzhiyuan
Copy link
Contributor

Glad to receive your PR! @slorber And if it's ready to merge, just let us know :)

# Conflicts:
#	packages/docusaurus-init/templates/bootstrap/package.json
slorber added a commit that referenced this pull request Apr 30, 2021
> Conflict: Multiple assets emit different content to the same filename assets/ideal-img/datagit.100.png
see #4089 (comment)
@slorber
Copy link
Collaborator

slorber commented Apr 30, 2021

going to merge/release this, and add another PR for the asset modules, as there are some details I'm not yet able to solve

@slorber slorber merged commit 05e7250 into facebook:master Apr 30, 2021
@RDIL RDIL deleted the webpack-5 branch April 30, 2021 16:44
@RDIL
Copy link
Contributor Author

RDIL commented Apr 30, 2021

🎉 🎉 🎉

@slorber
Copy link
Collaborator

slorber commented Apr 30, 2021

Thanks for your work on this @RDIL ! happy to get this finally merged

slorber added a commit that referenced this pull request Apr 30, 2021
> Conflict: Multiple assets emit different content to the same filename assets/ideal-img/datagit.100.png
see #4089 (comment)
facebook-github-bot pushed a commit to facebook/hermes that referenced this pull request May 5, 2021
Summary:
Use an unreleased version of Docusaurus to test the webpack5 support works for this site, detect potential problems, and perf improvements.

See also facebook/docusaurus#4089

Pull Request resolved: #500

Reviewed By: dulinriley

Differential Revision: D28129952

Pulled By: Huxpro

fbshipit-source-id: 07942b60d5200ea6dc3a9de86844da349f700a31
facebook-github-bot pushed a commit to facebook/relay that referenced this pull request May 21, 2021
Summary:
Use an unreleased version of Docusaurus to test the webpack5 support works for this site, detect potential problems, and perf improvements.

See also facebook/docusaurus#4089

Perf improvements
- First build (local): 300s
- Second build (local): 90s

To get the benefits, it requires caching `node_modules/.cache`.
It is not possible in GH actions, so I suggest migrating the site to Netlify and use the appropriate toml config (example: https://github.com/react-navigation/react-navigation.github.io/pull/974/files)

 ---

Unrelated suggestion: Relay has a lot of versions and long build/start times

Assuming nobody ever edit Relay docs of 2 years ago, you can improve the DX by limiting the number of versions display in dev with this docs plugin config:

```
          onlyIncludeVersions:
            (isDev || isDeployPreview)
              ? ['current', ...versions.slice(0, 2)]
              : undefined,
```

For faster prod build, you can also move older docs to standalone deployments and link to them (see Jest for versions < 25 => https://jestjs.io/)

Pull Request resolved: #3469

Reviewed By: rbalicki2

Differential Revision: D28127629

Pulled By: jstejada

fbshipit-source-id: c78309aa1c7f14f22ecc33166ad5dce7d2e51f94
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: breaking change Existing sites may not build successfully in the new version. Description contains more details.
Projects
None yet
9 participants