[WP5] Webpack5 update

Created by: raix

Webpack 5 update Includes the work listed in #9994 (closed) Replace #10656 and targeting the wp5 branch

Additional changes:

• persistent cache
• upgrade to dev server ´v4 (still beta)
• terser is now included in webpack
• comment out test except simple/kitchensink/oldnode
• update test matrix to use node 12 + 14 (postcss-normalize requires v12 + webpack 5)

Known issues:

• It feels like webpack emits compile twice - triggers a re print out on the screen (might be due to hook behavior change - or some of the code I removed in that area - maybe rewrite?)

Things I wanted to do but left out:

• extract loaders/plugins etc. into separate files to make the main webpack config clean / easier to read
• allowed domains - we should allow configuration and wildcard support imho
• print out performance stats of the build - really hard to track / compare build speeds - eg. detecting regression
• fix the test suite or comment out failing tests - eg. the pnp test is currently failing on master not sure if this pr. makes things better or worse
• Maybe remove the CRA error overlay as the default webpack overlay is very similar and require less config + code?

Credit include @andriijas, @sebinsua and @jasonwilliams (let me know if I missed out on any)

.github/workflows/integration.yml

+name: Integration Tests
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  job:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: ['ubuntu-latest', 'macos-latest', 'windows-latest']
+        node: ['10', '12', '14']
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup node
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+      - name: Cache dependencies
+        id: cache
+        uses: actions/cache@v2
+        with:
+          path: |
+            node_modules
+            */*/node_modules
+          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock', './yarn.lock') }}
+      - name: Install packages
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: yarn --frozen-lockfile --prefer-offline
+      - name: Run integration tests
+        run: yarn test:integration

docusaurus/docs/advanced-configuration.md

@@ -15,7 +15,7 @@ You can adjust various development and production settings by setting environmen
 | PORT                      |   ✅ Used   | 🚫 Ignored | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 | HTTPS                     |   ✅ Used   | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | WDS_SOCKET_HOST           |   ✅ Used   | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket hostname for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.hostname` for the SockJS hostname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockhost) for more details.                                                                                                                                                                                                              |
-| WDS_SOCKET_PATH           |   ✅ Used   | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket path for hot module reloading. Normally, `webpack-dev-server` defaults to `/sockjs-node` for the SockJS pathname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockpath) for more details.                                                                                                                                                                                                                              |
+| WDS_SOCKET_PATH           |   ✅ Used   | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket path for hot module reloading. Normally, `webpack-dev-server` defaults to `/ws` for the SockJS pathname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockpath) for more details.                                                                                                                                                                                                                              |
 | WDS_SOCKET_PORT           |   ✅ Used   | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket port for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.port` for the SockJS port. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockport) for more details.                                                                                                                                                                                                                          |
 | PUBLIC_URL                |   ✅ Used   |  ✅ Used   | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application.                                                                                                                                                                                                                                     |
 | BUILD_PATH                | 🚫 Ignored  |  ✅ Used   | By default, Create React App will output compiled assets to a `/build` directory adjacent to your `/src`. You may use this variable to specify a new path for Create React App to output assets. BUILD_PATH should be specified as a path relative to the root of your project.                                                                                                                                                                                                                                                                                                                                                                                          |

docusaurus/docs/using-the-public-folder.md

@@ -60,7 +60,7 @@ The `public` folder is useful as a workaround for a number of less common cases:
 
 - You need a file with a specific name in the build output, such as [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest).
 - You have thousands of images and need to dynamically reference their paths.
-- You want to include a small script like [`pace.js`](https://github.hubspot.com/pace/docs/welcome/) outside of the bundled code.
+- You want to include a small script like [`pace.js`](https://github.com/CodeByZach/pace) outside of the bundled code.
 - Some libraries may be incompatible with webpack and you have no other option but to include it as a `<script>` tag.
 
 Note that if you add a `<script>` that declares global variables, you should read the topic [Using Global Variables](using-global-variables.md) in the next section which explains how to reference them.

packages/create-react-app/__tests__/getTemplateInstallPackage.test.js

@@ -21,9 +21,9 @@ describe('getTemplateInstallPackage', () => {
   });
 
   it('cra-template-typescript gives cra-template-typescript', async () => {
-    await expect(getTemplateInstallPackage('cra-template-typescript')).resolves.toBe(
-      'cra-template-typescript'
-    );
+    await expect(
+      getTemplateInstallPackage('cra-template-typescript')
+    ).resolves.toBe('cra-template-typescript');
   });
 
   it('typescript gives cra-template-typescript', async () => {
@@ -45,9 +45,9 @@ describe('getTemplateInstallPackage', () => {
   });
 
   it('cra-template-typescript@next gives cra-template-typescript@next', async () => {
-    await expect(getTemplateInstallPackage('cra-template-typescript@next')).resolves.toBe(
-      'cra-template-typescript@next'
-    );
+    await expect(
+      getTemplateInstallPackage('cra-template-typescript@next')
+    ).resolves.toBe('cra-template-typescript@next');
   });
 
   it('@iansu gives @iansu/cra-template', async () => {
@@ -69,9 +69,9 @@ describe('getTemplateInstallPackage', () => {
   });
 
   it('@iansu/cra-template-typescript@next gives @iansu/cra-template-typescript@next', async () => {
-    await expect(getTemplateInstallPackage('@iansu/cra-template-typescript@next')).resolves.toBe(
-      '@iansu/cra-template-typescript@next'
-    );
+    await expect(
+      getTemplateInstallPackage('@iansu/cra-template-typescript@next')
+    ).resolves.toBe('@iansu/cra-template-typescript@next');
   });
 
   it('http://example.com/cra-template.tar.gz gives http://example.com/cra-template.tar.gz', async () => {

packages/eslint-config-react-app/README.md

@@ -39,7 +39,7 @@ This config also ships with optional Jest rules for ESLint (based on [`eslint-pl
 You'll first need to add the ESLint plugin for Jest (if you don't already have it installed).
 
 ```sh
-npm install --save-dev eslint-plugin-jest@^24.0.0 eslint-plugin-testing-library&^3.9.0
+npm install --save-dev eslint-plugin-jest@^24.0.0 eslint-plugin-testing-library@^3.9.0
 ```
 
 You can then enable these rules by adding the Jest config to the `extends` array in your ESLint config.