如何在TypeScript/JavaScript中使用Webpack打包生成的JS文件？

你当前的核心问题是：Webpack默认打包的产物仅适配浏览器全局引入场景，无法直接在TypeScript的ES模块中导入使用。根源在于配置未指定打包产物的多兼容模块格式，导致导出内容既不符合ES模块规范，也未处理CommonJS的依赖逻辑。

核心解决方案：配置Webpack输出多兼容模块格式 #

通过调整Webpack配置，让打包产物支持UMD格式（同时兼容全局变量、CommonJS、ES模块），或者同时输出ES模块和全局变量版本，满足不同平台的使用需求。

方案1：输出UMD格式（推荐，单文件兼容所有场景） #

修改webpack.config.js的output配置，添加模块格式声明：

const path = require("path");

module.exports =  {
    entry:"./src/app/index.ts",
    mode: 'development',
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.ts', '.js'],
    },
    output: {
        filename: 'JSApi.js',
        path: path.resolve(__dirname, 'dist'),
        // 新增：指定全局变量名称和多兼容模块格式
        library: 'JSApi', // HTML引入后可通过window.JSApi访问类
        libraryTarget: 'umd', // 启用UMD格式，兼容ES模块、CommonJS、全局变量
        globalObject: 'this', // 适配浏览器和Node环境的全局对象
        umdNamedDefine: true // UMD模块使用命名定义，提升兼容性
    },
};

方案2：同时输出ES模块和全局变量版本 #

如果需要更细分的模块输出（比如单独给ES模块场景提供轻量化产物），可配置双输出格式（需Webpack 5+支持）：

output: {
    // 全局变量+UMD版本
    filename: 'JSApi.js',
    path: path.resolve(__dirname, 'dist'),
    library: {
        name: 'JSApi',
        type: 'umd'
    },
    // 单独输出ES模块版本
    filename: 'JSApi.esm.js',
    library: {
        type: 'module'
    },
    module: true // 启用ES模块输出标记
}

调整tsconfig.json适配模块输出 #

修改tsconfig.json的模块编译配置，让TypeScript代码符合ES模块规范：

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "module": "ESNext", // 改为ESNext，适配Webpack的模块处理逻辑
    "esModuleInterop": true,
    "allowJs": true,
    "moduleResolution": "node" // 新增，确保模块解析规则正确
  },
  "exclude": [
    "node_modules",
    "Unit_Tests"
  ]
}

验证各平台使用方式 #

1. HTML全局引入：

<script src="dist/JSApi.js"></script>
<script>
    const class1 = new JSApi.Class1();
    const class2 = new JSApi.Class2();
</script>

2. TypeScript/ES模块导入：

import { Class1, Class2 } from './dist/JSApi.js';
const class1 = new Class1();

如果用方案2的ES模块版本，则导入路径改为./dist/JSApi.esm.js。

3. CommonJS环境（Node.js）导入：

const { Class1, Class2 } = require('./dist/JSApi.js');

补充说明 #

• 确保你的index.ts正确导出目标类：

export { Class1 } from './Class1';
export { Class2 } from './Class2';

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