chore(deps): update dependency webpack to v5

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
webpack	4.46.0 -> 5.73.0

---

Configuration

📅 Schedule: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Renovate will not automatically rebase this PR, because other commits have been found.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, click this checkbox. ⚠ Warning: custom changes will be lost.

---

This PR has been generated by Mend Renovate. View repository job log here.

[scissorsneedfoodtoo]

Needs Webpack v4 / #1306 to be merged before this can be updated.

[scissorsneedfoodtoo]

This will need more investigation. To get this working, we'll need to:

• add fallbacks to the Webpack config:

resolve: {
  fallback: {
    path: require.resolve('path-browserify'),
    util: require.resolve('util/')
  }
}

• figure out why the test runner is erroring out in projects (process is not defined)

Edit: Turns out Webpack <= 4 included some useful polyfills, which were removed in v5. We just have to replace a few to prevent errors in the browser.

[scissorsneedfoodtoo]

Tested locally and everything seems to be working. Tests pass and the bundle size is about the same as it was with Webpack 4.

Will wait for another review before we merge this.

[scissorsneedfoodtoo]

Just in case I trigger a rebase and force push from Renovate again, here are the updates we need to get Webpack v5 working:

• Add additional packages to replace Node polyfills, which were removed in v5:

yarn add path-browserify buffer util process --dev

• Update webpack.config.js to the following:

const path = require('path');
const webpack = require('webpack');

module.exports = function (env = {}) {
  const __DEV__ = env.production ? false : true;
  const outputPath = path.join(__dirname, 'build/testable-projects-fcc/v1');
  return {
    mode: __DEV__ ? 'development' : 'production',
    entry: './src/index.js',
    output: {
      library: 'FCC_Global',
      path: outputPath,
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          // uses config from .babelrc
          loader: 'babel-loader'
        },
        {
          test: /\.css$/,
          exclude: /node_modules/,
          // creates String for importing into JS
          loader: 'css-loader'
        },
        {
          test: /\.html$/,
          exclude: /node_modules/,
          // creates String for importing into JS
          loader: 'html-loader'
        }
      ]
    },
    plugins: [
      new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer']
      }),
      new webpack.ProvidePlugin({
        process: 'process/browser'
      })
    ],
    resolve: {
      fallback: {
        path: require.resolve('path-browserify'),
        util: require.resolve('util/')
      }
    }
  };
};

Not much has changed in webpack.config.js. We just need to require Webpack and add some plugins and fallbacks to re-enable polyfills for some of the core Node modules.

[renovate]

Renovate Ignore Notification

Because you closed this PR without merging, Renovate will ignore this update. You will not get PRs for any future 5.x releases. But if you manually upgrade to 5.x then Renovate will re-enable minor and patch updates automatically.

If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR.