如何在Webpack中异步加载带有AsyncRoute的组件？

const AsyncComponent = React.lazy(() => import('./AsyncComponent'));

const routes = [
  {
    path: '/async',
    component: AsyncComponent
  },
  // 其他路由配置...
];

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <React.Suspense fallback={<div>Loading...</div>}>
          <Route path="/async" component={AsyncComponent} />
        </React.Suspense>
      </Switch>
    </Router>
  );
};

{
  "plugins": ["syntax-dynamic-import"]
}

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: ['@babel/plugin-syntax-dynamic-import']
        }
      }
    }
  ]
}