Webpack instructions are outdated--a proposal for an updated config

The instructions for compiling with webpack appear to be somewhat outdated.

In Webpack Version 5 (the most recent at the time of writing), a bunch of modules which before where automatically added, were removed. The full list is here: https://webpack.js.org/configuration/resolve/#resolvefallback). So these now need to be explicitly added to the config file.

There were some other issues as well (see the comments), but in the end I managed to get webpack working, with the following webpack.config.js:

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

module.exports = {
    'mode': 'development',
    entry: './index.js',
    target: 'web',
    resolve: {
        alias: {
            hyperswarm: 'hyperswarm-web',
            /*
                When using graceful-fs, there is an odd runtime issue because of types at a 
                line of Object.setProtoTypeOf            
                See: https://github.com/isaacs/node-graceful-fs/issues/222 
                It Can be resolved by manually removing that line from the bundle, 
                which is a very clumsy solution (and it removes some functionality of graceful-fs)
                Or by not mapping fs on graceful-fs, and setting 'fs: false' in fallback. 
            */
            //fs: 'graceful-fs',            
        },
        fallback: { 
            crypto: require.resolve("crypto-browserify"),
            path: require.resolve("path-browserify"),
            os: require.resolve('os-browserify/browser'),
            stream: require.resolve('stream-browserify'),
            constants: require.resolve('constants-browserify'),

            /* 
                The ones who follow cause errors which are only detected at runtime
                when they are not added
            */
            buffer: require.resolve('buffer/'),  // Note the trailing slash
            process: 'process/browser', // https://stackoverflow.com/questions/65018431/webpack-5-uncaught-referenceerror-process-is-not-defined
            fs: false
        },
    },
    plugins: [
        //SOURCE: https://viglucci.io/how-to-polyfill-buffer-with-webpack-5
        new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
            process: 'process/browser',
        }),       
    ],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
}

After adding all required packages to the project (yarn or npm add hyperswarm-web crypto-browserify etc.), webpack can create a bundle, and this bundle works (I managed to read an external hyperdrive from the browser). A similar config can also be used to create a Quasar-Vue app.

There very well might be other missing packages, which will be detected only at runtime, but I think this config already gives a good idea of how to resolve the issues.

Some specific remarks concerning the example config in the readme:

I got an odd runtime error when using graceful-fs (see comments in the webpack.config.js)
I think the solution in the current readme for adding util is non-standard, but I couldn't really check for a better way, because it wasn't required to create the bundle in my case.

If you want, I can create a pull request to update the Readme, or even include a webpack.config.js in the repo, so there is an example config which works.

RangerMauve / hyper-sdk

Webpack instructions are outdated--a proposal for an updated config #96