如何在HTML页面中导入并使用来自模块的TypeScript类？

我来帮你搞定这个问题！你现在卡在Webpack打包配置和浏览器调用的匹配上，还有依赖打包的逻辑没理顺，一步步来调整：

1. 先修正Webpack的打包逻辑，把所有依赖打包到同一个bundle里 #

你当前的Webpack entry把my-class和my-dependency拆成了两个独立的入口，这会导致它们被打包成两个分离的文件。当浏览器加载my-class.js时，找不到MyDependency的代码（因为没加载对应的依赖bundle）。

其实你只需要保留my-class作为唯一入口，Webpack会自动递归打包它所有的关联依赖（包括MyDependency、其他内部类以及NPM包）：

entry: {
    "my-class": path.resolve(__dirname, "./ts/my-directory/my-class.ts"),
    // 删掉「my-dependency」这一行，不需要单独打包它
},

另外注意你的output配置：libraryExport: "default"意味着打包后，window.MyLibrary直接就是你的MyClass类本身，而不是一个包含MyClass属性的对象——这个细节后面调用时要对应上。

2. 修正HTML中的调用代码 #

你现在的调用代码有两个明显问题：

• 第一个script标签拼写错误，是<script>不是<Script>
• 调用逻辑和output配置不匹配，因为libraryExport: "default"，所以不需要.MyClass后缀

调整后的HTML代码如下：

<script src="/dist/my-class.js"></script>
<script>
    // window.MyLibrary 直接对应你的 MyClass 类
    const instance = new window.MyLibrary();
    instance.doSomething();
</script>

如果想使用ES模块的方式调用（避免全局变量），可以把Webpack的output调整为模块格式（需要Webpack 5+），不过先确保全局调用能跑通，再尝试这种进阶方式。

3. 额外检查项 #

• 确认TypeScript的导入路径正确：import { MyDependency } from ...里的路径要和文件实际位置匹配（比如同目录下应该是./my-dependency）
• 重新运行Webpack后，打开dist/my-class.js搜索MyDependency，确认它的代码已经被打包进bundle里
• 你的tsconfig配置是没问题的，target: ES2017、module: UMD和Webpack的设置匹配，不需要修改

按这个流程调整后，应该就能成功实例化MyClass并调用方法了！

备注：内容来源于stack exchange，提问作者yvsean