如何用Webpack合并tsc生成的无模块TypeScript编译文件

要实现无模块包装、合并TS编译后的全局代码、暴露全局类的需求，需从TypeScript编译配置和Webpack配置两方面调整：

1. 修改TypeScript配置（tsconfig.json） #

确保TS编译为全局脚本而非模块，避免Webpack将代码包裹在模块作用域内：

{
  "compilerOptions": {
    "target": "ES5", // 根据需求选择JS目标版本
    "module": "none", // 核心配置：不生成模块代码，编译为全局脚本
    "outDir": "./ts-dist", // TS编译后的JS输出目录
    "strict": false,
    "declaration": false
  },
  "include": ["./ts/**/*.ts"]
}

执行tsc编译后，ts-dist目录下的file1.js和file2.js会直接将classA、classB暴露到全局作用域。

2. 调整Webpack配置 #

关闭Tree Shaking（避免未被模块引用的全局类被移除），并设置输出为全局脚本：

const path = require('path');

module.exports = {
  entry: {
    bootstrap: [
      './ts-dist/file1.js',
      './ts-dist/file2.js'
    ]
  },
  mode: 'production',
  optimization: {
    usedExports: false, // 关闭Tree Shaking，保留所有全局变量/类
    minimize: true // 保留压缩（若不需要可设为false）
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].min.js',
    library: {
      type: 'window' // 确保输出代码直接挂载到window，无模块包装函数
    },
    clean: true // 构建前清空dist目录（可选）
  }
};

3. 执行流程 #

1. 先运行tsc编译TS文件到ts-dist目录
2. 运行webpack打包编译后的JS文件到dist/bootstrap.min.js

关键说明 #

• 之前的问题根源：生产模式下Webpack默认开启Tree Shaking，会移除它认为“未使用”的类（因为类没有在模块内部被引用）；同时TS默认编译为模块，导致类被包裹在模块作用域内无法全局访问。
• 若想让Webpack直接处理TS文件（无需手动执行tsc），可在ts-loader的options中强制设置module: 'none'，并保持上述Webpack的optimization和output配置。

测试验证：打包后的文件会包含所有console语句和类定义，在浏览器中可直接执行new classA().a()。

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