嘿，这个场景我之前帮不少团队处理过，把Webpack打包的TS代码无缝接入传统页面，核心就是让Webpack产物能暴露成全局可访问的变量，具体可以按这几步来：

首先把要注入非Webpack页面的TS辅助代码单独拎一个入口文件，比如src/utils/es5-compat-entry.ts，在这个文件里把需要对外暴露的工具函数、类明确处理：

// src/utils/es5-compat-entry.ts
import { formatDate, validateForm, UserService } from './your-utils';

// 方式一：直接挂载到window（最简单，适合快速验证）
(window as any).MyAppHelpers = {
  formatDate,
  validateForm,
  UserService
};

// 方式二：通过export导出，让Webpack帮你处理全局暴露（更规范）
export { formatDate, validateForm, UserService };

然后在Webpack的entry里加上这个入口：

// webpack.config.js
module.exports = {
  entry: {
    vendor: [/* 你的第三方依赖，比如react、lodash这些 */],
    // 其他Webpack页面的入口...
    es5Compat: './src/utils/es5-compat-entry.ts' // 新增的特殊入口
  },
  // ... 其他配置
};

这是关键！默认Webpack打包的代码是闭包内的，外部访问不到，所以要在output里设置library相关配置，让你的es5Compat.bundle.js把导出内容暴露到全局window上：

// webpack.config.js
const path = require('path');

module.exports = {
  // ... entry配置
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    // 核心配置：把es5Compat入口的内容暴露为全局变量
    library: {
      name: 'MyAppHelpers', // 全局变量名，和你上面挂载的名字保持一致
      type: 'umd', // 兼容多种模块系统，同时支持全局访问
      export: 'default' // 如果入口是默认导出的话设为default；多export场景可以忽略
    }
  },
  // ... 其他配置（比如module里的ts-loader、babel-loader）
};

如果你的其他入口不需要全局暴露，更清晰的方式是写一个独立的Webpack小配置文件（比如webpack.es5-compat.config.js）专门打包这个辅助代码，避免和主项目配置混在一起，配置逻辑和上面一致，只是entry只保留这个特殊入口即可。

传统页面的运行环境可能偏旧，要让TS编译后的代码符合ES5标准：
修改tsconfig.json：

{
  "compilerOptions": {
    "target": "ES5", // 编译到ES5
    "module": "ESNext", // 让Webpack处理模块转换
    "declaration": true, // 可选，生成d.ts文件方便后续维护
    "outDir": "./dist/types", // 可选，输出类型文件
    // ... 其他配置
  }
}

打包完成后，你会得到dist/es5Compat.bundle.js（独立配置的话可能叫my-app-helpers.js），然后在传统页面里用普通script标签引入：

<!-- 传统非Webpack页面 -->
<script src="/dist/vendor.bundle.js"></script> <!-- 如果辅助代码依赖vendor里的第三方库，先引入vendor -->
<script src="/dist/es5Compat.bundle.js"></script>
<script>
  // 直接通过全局变量使用
  const today = MyAppHelpers.formatDate(new Date());
  console.log('格式化后的日期：', today);

  const formValid = MyAppHelpers.validateForm({ username: 'test' });
  if (formValid) {
    // 执行你的业务逻辑
  }

  // 如果是类的话
  const userService = new MyAppHelpers.UserService();
  userService.fetchUserInfo();
</script>

• 如果辅助代码依赖第三方库（比如lodash），要么把这些库打包到es5Compat.bundle.js里（Webpack默认会这么做，除非用splitChunks抽离公共依赖到vendor），要么在传统页面里先引入这些第三方库的CDN版本或本地脚本。
• 测试时可以用webpack-dev-server，把dist目录设为静态资源目录，然后在传统页面里访问本地服务地址，验证功能是否正常。
• 怕全局变量冲突的话，把MyAppHelpers改成更独特的名字，比如项目前缀+Utils之类的。

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