延迟加载react-router-dom，webpack无法正常工作

Question

我尝试使用react-router-dom延迟加载路由，但它不起作用。 Webpack应该在import（）上自动拆分块但是它没有，我总是最终得到一个main.hash.js文件而不是多个块。有什么我想念的吗？

应用组件：

import * as React from 'react';
import { Route, BrowserRouter, Link } from 'react-router-dom';
const Todos = React.lazy(() => import('routes/Todos'))

class App extends React.Component<{}, {}> {
  render() {
    return (
      <>
        <BrowserRouter>
          <React.Suspense fallback={<div>loading...</div>}>
            <Route exact path="/" render={() => <Link to="/todos">Todos</Link>} />
            <Route exact path="/todos" component={Todos} />
          </React.Suspense>
        </BrowserRouter>
      </>
    )
  }
}
export default App;

这是webpack配置，以防它可能与这方面的某些插件或缺少配置有关：

webpack常用配置：

const webpack = require('webpack');

const HtmlWebPackPlugin = require('html-webpack-plugin');
// clean folder (dist in this case)
const CleanWebpackPlugin = require('clean-webpack-plugin');
// copy files
const CopyPlugin = require('copy-webpack-plugin');

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.tsx'),
  resolve: {
    extensions: ['.js', '.ts', '.tsx', '.scss'],
    alias: {
      'src': path.resolve(__dirname, 'src/'),
      'components': path.resolve(__dirname, 'src/components/'),
      'routes': path.resolve(__dirname, 'src/routes/'),
    }
  },
  plugins: [
    new CleanWebpackPlugin(['dist'], {}),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "index.html"
    }),
    new CopyPlugin([
      { from: 'assets', to: 'assets' },
    ]),
  ]
};

webpack prod配置：

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');

// split css per js file
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// optimize js
const TerserPlugin = require('terser-webpack-plugin');
// optimize css
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// service-worker
const Workbox = require('workbox-webpack-plugin');

module.exports = merge(common, {
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.ts|\.tsx$/,
        loader: "ts-loader",
        include: path.resolve(__dirname, 'src')
      },
      {
        test: /\.scss$/,
        loader: MiniCssExtractPlugin.loader
      },
      {
        test: /\.scss$/,
        loader: 'css-loader',
        options: {
          modules: true,
          localIdentName: '[hash:base64:5]'
        }
      },
      {
        test: /\.scss$/,
        loader: 'postcss-loader',
      },
      {
        test: /\.scss$/,
        loader: 'sass-loader',
      }
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css',
      chunkFilename: '[id].[hash].css',
    }),
    new OptimizeCssAssetsPlugin({}),
    new Workbox.GenerateSW({
      clientsClaim: true,
      skipWaiting: true,
      exclude: [/\.(?:png|jpg|jpeg|svg)$/],
      runtimeCaching: [
        {
          urlPattern: /https?:\/\/.+/,
          handler: 'StaleWhileRevalidate',
          options: {
            cacheableResponse: {
              statuses: [0, 200]
            }
          }
        }, {
          urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
          handler: 'CacheFirst',
        }],
    })
  ],
  optimization: {
    minimizer: [new TerserPlugin()],
  },
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  }
});

Answer 1

来自：https://github.com/webpack/webpack/issues/5703#issuecomment-357512412

compilerOptions.module必须设置为esnext才能让webpack拆分动态导入。