Bump webpack to version >= 5

[mecampbellsoup]

Description

@HashemKhalifa we are really happy with your template here but in an attempt to bump to Webpack 5 discovered some incompatiblity - specifically, webpack-serve has been deprecated and is not usable with webpack versions 5+.

(⎈ minikube:cloud)➜  webpack-react-boilerplate git:(webpack-5) yarn start
yarn run v1.22.10
$ cross-env NODE_ENV=development webpack serve --open
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration has an unknown property 'serve'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, experiments?, externals?, externalsPresets?, externalsType?, ignoreWarnings?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, snapshot?, stats?, target?, watch?, watchOptions? }
   -> Options object as provided by the user.
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           serve: …
         }
       })
     ]
error Command failed with exit code 2.

Upon simply commenting out the devServer.serve configuration in the webpack config, HMR ceases to work.

Happy to work with you on whatever changes might be needed to drop webpack-serve in favor of WDS as is recommended now - just let me know what you think! 😄

References

https://webpack.js.org/migrate/5/#update-outdated-options