webpack4使用react-loadable为什么不生效?

Question

webpack配置:

const path = require("path");
const webpack = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const packageName = require("../package.json").name;
const envConfig = require("../src/config/envConfig.ts");
const configs = envConfig[process.env.REACT_APP_ENV || "prd"];

module.exports = {
  mode: "production",
  entry: {
    app: "./index.js",
  },
  devtool: false,
  output: {
    filename: "[name].[hash:8].js",
    path: path.resolve(__dirname, `../dist/static/`),
    publicPath: "/static/",
    library: `${packageName}-[name]`,
    libraryTarget: "umd",
    jsonpFunction: `webpackJsonp_${packageName}`,
  },
  resolve: {
    //添加别名
    alias: {
      "@": path.resolve(__dirname, "../src/"),
    },
    // 添加默认解析后缀
    extensions: [".js", ".jsx", ".ts", ".tsx", ".json"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.(css|less)$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
            },
            {
              loader: "postcss-loader",
            },
            {
              loader: "less-loader",
              options: {
                modifyVars: {
                  "@primary-color": "#",
                },
                javascriptEnabled: true,
              },
            },
          ],
        }),
      },
      {
        test: /\.(ico|png|gif|jpg|jpeg|svg)$/,
        loader: "url-loader",
      },
    ],
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: false,
        },
      }),
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new OptimizeCssAssetsPlugin(),
    new ExtractTextPlugin({
      filename: `app.min.[hash:8].css`,
    }),

    new CompressionPlugin({
      filename: "[path].gz[query]",
      algorithm: "gzip",
      test: new RegExp("\\.(js|css)$"),
      threshold: 10240,
      minRatio: 0.8,
    }),
    new HtmlWebpackPlugin({
      filename: path.resolve(__dirname, "../dist/index.html"),
      template: "index.html",
      inject: true,
      minify: {
        emoveComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true,
      },
    }),
    new webpack.DefinePlugin(
      Object.keys(configs).reduce((env, key) => {
        env[key] = JSON.stringify(configs[key]);
        return env;
      }, {})
    ),
  ],
};

路由配置：

const Task1 = loadable(() => import('../pages/task1'))
const Task2 = loadable(() => import('../pages/task2'))
const Task3 = loadable(() => import('../pages/task3'))

打包的时候生成的文件：

并没有生成很多chunk文件，请问是什么原因呢？