Webpack dev server loads @material-ui and react differently

* **electron-webpack version**: 2.8.2
* **electron-builder version**: 22.9.1
* **electron version**: 8.2.0

**Steps to reproduce**

1. `git clone https://github.com/electron-userland/electron-webpack-quick-start.git`
2. `cd electron-webpack-quick-start`
3. `yarn add react react-dom @material-ui/core`
4. Change `src/index/renderer.js`
```js
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
height: '100vh',
width: '100%',
},
});

function Test() {
const classes = useStyles();
return React.createElement('div', {className: classes.root});
}

ReactDOM.render(React.createElement(Test, null), document.getElementById('app'));
```
5. `yarn dev`

**Expected results:**

I see a window with a nice gradient.

**Actual results:**

I see a white window with following error in developers console:

```
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (:37681/tmp/electron-webpack-quick-start/node_modules/react/cjs/react.development.js:1476)
at Object.useContext (:37681/tmp/electron-webpack-quick-start/node_modules/react/cjs/react.development.js:1484)
at useTheme (:37681/tmp/electron-webpack-quick-start/node_modules/@material-ui/styles/useTheme/useTheme.js:15)
at useStyles (:37681/tmp/electron-webpack-quick-start/node_modules/@material-ui/styles/makeStyles/makeStyles.js:243)
at Test (webpack-internal:///./src/renderer/index.js:18)
at renderWithHooks (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14985)
at mountIndeterminateComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17811)
at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19049)
at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:3994)
```

As you may see in a stack trace React is first loaded via webpack dev server (webpack-internal://),
but @material-ui and its dependencies are loaded via direct file access (file://).
This leads to 2 copies of React being used in the same app (case 3 in error message).

I suspect it is caused by alias from `@` to sourceDir.

**Workaround**

So far I have managed to circumvent this issue by using webpack alias without `@` in the name.

package.json
```json
"electronWebpack": {
"renderer": {
"webpackConfig": "renderer.webpack.js"
}
}
```

renderer.webpack.js
```js
const path = require('path');

module.exports = {
resolve: {
alias: {
'material-ui': path.resolve('./node_modules/@material-ui'),
}
}
};
```

src/rendered/index.js
```js
import { makeStyles } from 'material-ui/core';
```

Start with the reproduction in src/index/renderer.js and run yarn dev in electron-webpack-quick-start. Read the renderer webpack configuration referenced by package.json, especially the @ alias and the workaround in renderer.webpack.js. Done means the reproduced app renders the gradient without the invalid hook call or duplicate React loading described in the console.

Written by the indexing model from the issue text.