chore: Partial webpack 5 support (#1707)

Refs #1703

* Inline loaders and ! prefixes should not be used as they are non-standard. They may be used by loader generated code.
https://webpack.js.org/configuration/module/#ruleenforce
* Adds support for both Webpack 4 and 5 in StyleguidistOptionsPlugin
* Updates dependencies in Webpack example (easier to test against)
* Because automatic polyfilling is switched off in 5, assert was brought in as a dependency (it's used by Doctrine, see below)

## Upstream issues

Both issues below are tied to facebook/create-react-app#7929:

* Process is not defined - The page still builds but this error will show in the console. I can't seem to polyfill this if anyone else can that would be great, then I think we're done.
* TypeError: message.split is not a function - you may not get this error, but if you do it's related to facebook/create-react-app#7929. The quick fix is to go into node_modules/react-dev-utils/formatWebpackMessages.js:19 and add the code from facebook/create-react-app#7929 (comment)

## Not needed for this but nice to have.

Doctrine should be replaced with another JSDoc parser. Doctrine is end of life and no longer supported. It causes problems with Webpack 5 because it pulls in assert which WP5 does not polyfill. For now, we can fix it by adding those polyfills (assert) but a more stable solution should be found. The issue raised: #1708

docs/API.md

@@ -27,7 +27,15 @@ const styleguide = styleguidist({
         },
         {
           test: /\.css$/,
-          loader: 'style-loader!css-loader?modules'
+          use: [
+            'style-loader',
+            {
+              loader: 'css-loader',
+              options: {
+                modules: true
+              }
+            }
+          ]
         }
       ]
     }

examples/basic/styleguide.config.js

@@ -21,7 +21,7 @@ module.exports = {
 				},
 				{
 					test: /\.css$/,
-					loader: 'style-loader!css-loader',
+					use: ['style-loader', 'css-loader'],
 				},
 			],
 		},

examples/customised/styleguide.config.js

@@ -59,7 +59,15 @@ module.exports = {
 				},
 				{
 					test: /\.css$/,
-					loader: 'style-loader!css-loader?modules',
+					use: [
+						'style-loader',
+						{
+							loader: 'css-loader',
+							options: {
+								modules: true,
+							},
+						},
+					],
 				},
 				{
 					test: /\.svg$/,

examples/express/styleguide.config.js

@@ -11,7 +11,15 @@ module.exports = {
 				},
 				{
 					test: /\.css$/,
-					loader: 'style-loader!css-loader?modules',
+					use: [
+						'style-loader',
+						{
+							loader: 'css-loader',
+							options: {
+								modules: true,
+							},
+						},
+					],
 				},
 			],
 		},

examples/preact/styleguide.config.js

@@ -17,7 +17,15 @@ module.exports = {
 				},
 				{
 					test: /\.css$/,
-					loader: 'style-loader!css-loader?modules',
+					use: [
+						'style-loader',
+						{
+							loader: 'css-loader',
+							options: {
+								modules: true,
+							},
+						},
+					],
 				},
 			],
 		},

examples/sections/styleguide.config.js

@@ -80,7 +80,7 @@ module.exports = {
 				},
 				{
 					test: /\.css$/,
-					loader: 'style-loader!css-loader',
+					use: ['style-loader', 'css-loader'],
 				},
 			],
 		},

examples/themed/styleguide.config.js

@@ -23,7 +23,7 @@ module.exports = {
 				},
 				{
 					test: /\.css$/,
-					loader: 'style-loader!css-loader',
+					use: ['style-loader', 'css-loader'],
 				},
 			],
 		},

examples/webpack/babel.config.js

@@ -1,11 +1,11 @@
 module.exports = {
 	presets: [
 		[
-			'@babel/env',
+			'@babel/preset-env',
 			{
-				debug: true,
 				modules: false,
 				useBuiltIns: 'usage',
+				corejs: 3,
 			},
 		],
 		'@babel/react',