如何用Webpack构建多页面TSX网站并生成独立JS文件？

我的技术栈 #

• 采用React进行页面渲染
• 直接使用TypeScript（不借助Babel）将TSX转换为浏览器兼容的ES5代码
• 使用Webpack进行代码拆分打包
• 将babel-polyfill打包进vendor.js，但不被TypeScript代码引用

核心需求 #

借助HtmlWebpackPlugin实现以下目标：

1. 将JavaScript库及公共代码打包为单个vendor.js
2. 为每个仅包含继承React.Component<P,S>的[name]类定义的[name].tsx文件，分别生成：
   • 对应的[name].js文件
   • 基于模板的[name].html文件，该文件需同时引用vendor.js和[name].js
3. [name].tsx中若导入已包含在vendor.js中的模块，不得重复打包进[name].js；其余模块正常打包进[name].js

当前问题 #

查阅Webpack官方文档后仍无头绪，找到的多页面构建指南会将库代码重复打包进每个[name].js造成冗余；externals方案仅适用于已有JS文件，不适用于生成的打包文件。

当前单页面Webpack配置 #

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"
}

请问能否将其改造为符合上述需求的多页面配置？

当然可以！我们可以通过配置splitChunks实现公共代码抽离，再动态生成多页面的HtmlWebpackPlugin实例来满足你的需求。下面是一步步的改造方案：

1. 重构Entry入口 #

首先拆分entry为两部分：

• vendor入口：包含babel-polyfill和所有你想抽离的公共库（比如React、ReactDOM等）
• 页面入口：每个[name].tsx对应一个独立入口，后续新增页面只需扩展这个列表即可

2. 配置SplitChunks抽离公共代码 #

在optimization.splitChunks中设置规则，强制把公共依赖和babel-polyfill打包到vendor.js，确保页面文件不会重复打包这些模块：

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]|babel-polyfill/,
        name: 'vendor',
        enforce: true,
        priority: 10 // 确保优先匹配vendor规则
      }
    }
  }
}

3. 动态生成多页面的HtmlWebpackPlugin实例 #

为每个页面入口创建对应的HtmlWebpackPlugin实例，指定模板、输出文件名，并确保每个HTML同时引用vendor.js和当前页面的[name].js：

const pages = ['pageA', 'pageB', 'index']; // 替换为你的实际页面列表
const htmlPlugins = pages.map(page => new HtmlWebpackPlugin({
  template: './src/template.html', // 共用的HTML模板
  filename: `${page}.html`,
  chunks: ['vendor', page], // 绑定需要注入的chunk
  inject: 'body' // 脚本注入到body末尾，优化加载体验
}));

完整改造后的Webpack配置 #

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

// 定义页面列表，可根据实际情况扩展，或用Node.js的fs模块自动扫描src目录生成
const pages = ['pageA', 'pageB', 'index'];

module.exports = {
  entry: {
    // 公共vendor入口：包含babel-polyfill和核心依赖
    vendor: ['babel-polyfill', 'react', 'react-dom'],
    // 各个页面的独立入口
    ...pages.reduce((entries, page) => {
      entries[page] = `./src/${page}.tsx`;
      return entries;
    }, {})
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'), // 指定输出目录
    clean: true // 每次构建自动清空dist目录，可选
  },
  plugins: [...htmlPlugins],
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        loader: 'ts-loader',
        exclude: /node_modules/, // 用正则匹配更准确
        options: {
          transpileOnly: true // 加快构建速度，生产环境可配合fork-ts-checker做类型检查
        }
      },
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader',
        exclude: /node_modules/
      },
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'], // 简化扩展名顺序，常用的放前面
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]|babel-polyfill/,
          name: 'vendor',
          chunks: 'all',
          enforce: true,
          priority: 10
        }
      }
    }
  },
  devtool: "source-map"
}

关键说明 #

1. 代码分割可靠性：splitChunks规则会确保所有node_modules依赖和babel-polyfill仅打包到vendor.js，页面JS只包含自身代码和未抽离的私有模块
2. 多页面扩展性：新增页面只需在pages数组中添加名称，无需手动重复配置插件
3. TS转ES5正确性：确保tsconfig.json中compilerOptions.target设为ES5、jsx设为react，TypeScript会直接将TSX转成ES5的React代码，无需Babel中转

配套tsconfig.json示例 #

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

这样改造后就能完美满足你的需求：单个vendor.js承载公共代码，每个页面拥有独立的JS和HTML文件，且无冗余重复打包。

内容的提问来源于stack exchange，提问作者Alsein