webpack找不到可加载组件

如何解决webpack找不到可加载组件

我正在尝试学习如何通过动态导入进行代码拆分，但是不幸的是，我遇到了如下错误：

Uncaught (in promise) ReferenceError: require is not defined
    at Function.requireEnsure [as e] (bootstrap:90)
    at Object.importAsync (lazyLoader.tsx:4)
    at Object.requireAsync (lazyLoader.tsx:4)
    at InnerLoadable.loadAsync (loadable.esm.js:235)
    at InnerLoadable.componentDidMount (loadable.esm.js:167)
    at commitLifeCycles (react-dom.development.js:19814)
    at commitLayoutEffects (react-dom.development.js:22803)
    at HTMLUnkNownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)

并在以下行中发生错误：

const LoginPage = loadable(
  () => import('Pages/login'),{ fallback: <CardListSkeleton /> }
);

Webpack.config如下：

module.exports = {
  devtool: 'inline-source-map',context: __dirname,target: 'node',entry: ['./src/index.tsx'],module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,exclude: /node-modules/,use: [
          {
            loader: 'babel-loader',},],{
        test: /\.tsx?$/,use: 'ts-loader',exclude: /node_modules/,{
        test: /\.s?[a|c]ss$/,use: [MiniCssExtractPlugin.loader,'css-loader','sass-loader'],{
        test: /\.svg$/,use: ['svg-inline-loader'],{
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,use: [
          {
            loader: 'file-loader',options: {
              name: '[name].[ext]',outputPath: 'fonts/',{
        test: /\.jpeg$/,outputPath: 'images/',resolve: {
    modules: [path.resolve('src'),'node_modules'],extensions: ['.tsx','.ts','.js'],alias: Aliases,output: {
    publicPath: '/',filename: '[name].[hash].js',chunkFilename: '[name].[hash].js',path: path.resolve(__dirname,'dist/'),devServer: {
    historyApiFallback: true,stats: 'minimal',compress: true,contentBase: path.resolve(__dirname,'src/'),open: true,plugins: [
    new HtmlWebpackPlugin({
      hash: true,template: './assets/index.html',}),new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(nodeenv),APP_NAME: JSON.stringify(APP_NAME),SERVER_URL: JSON.stringify(process.env.SERVER_URL),SERVER_PORT: JSON.stringify(process.env.SERVER_PORT),new MiniCssExtractPlugin({
      filename: '[name].[hash].css',chunkFilename: '[name].[hash].css',new LoadablePlugin({ writetodisk: true }),};

我也有babel.config.js：

module.exports = {
    "ignore": [/[/\\]core-js/,/@babel[/\\]runtime/],"presets": [
        "@babel/preset-env","@babel/preset-typescript","@babel/preset-react"
    ],"plugins": [
        "@loadable/babel-plugin","@babel/plugin-proposal-class-properties","@babel/plugin-Syntax-dynamic-import"
    ]
}