javascript - 如何使用 Webpack 打包具有独立 js 文件的多页面 (tsx) 网站？

我正在使用：

用于页面渲染的react。

typescript 直接（无需 babel）将 tsx 转译为适用于浏览器的 ES5

使用 webpack 分别生成代码

babel-polyfill 应打包在 vendor.js 中，但不应被 TypeScript 代码引用

我想将 JavaScript 库和我的公共代码打包到一个 vendor.js 中，并为每个 [name].tsx（其中 仅 包含一个继承自 React.Component<P,S> 的类定义 [name]）使用 HtmlWebpackPlugin 生成 独立的 [name].js 文件及引用 vendor.js 和 [name].js 的 [name].html（带模板）。

[name].tsx 可能会导入模块。包含在 vendor.js 中的模块 不能包括在 [name].js 中，其他模块必须正常包含在 [name].js 中

我已经阅读了 webpack 官方网站的文档，但仍然不知道该如何做。

我确实找到了一些实现多页面网站的指南，但所有的库都包含在单独的 [name].js 文件中，这意味着 JavaScript 库在每一个 [name].js 中都被重复包含，这显然不是预期的。

我找到了一些关于 externals 的指南，但它只能用于现有的 js 文件，不能用于生成的 bundle 文件。

这是我当前的 webpack.config.js，它仅支持单页面：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    entry: {
        "index.js": ['babel-polyfill', './src/index.tsx']
    },
    output: { filename: '[name]' },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    module: {
        rules: [{
            test: /\.(ts|tsx)$/,
            loader: 'ts-loader',
            exclude: '/node_modules/'
        }, {
            enforce: 'pre',
            test: /\.js$/,
            loader: 'source-map-loader'
        },]
    },
    resolve: {
        extensions: ['.webpack.js', '.web.js', '.ts', '.js', '.tsx']
    },
    devtool: "source-map"
} 

有没有办法让它像描述的那样支持多页？