是否可以在 TypeScript 导入中指定 webpack 加载器？

Posted 2023-03-13

【中文标题】是否可以在 TypeScript 导入中指定 webpack 加载器？

【英文标题】：Is it possible to specify a webpack loader in a TypeScript import?

【发布时间】：2017-04-25 08:35:11

【问题描述】：

我的项目是用 TypeScript 编写的，并使用 webpack 来捆绑脚本。所有 .ts 文件都经过 TypeScript 加载器，以便将它们转换为 javascript；我想弄清楚如何做的是让一些特定的导入通过自定义 webpack 加载器。比如：

import widget from 'myCustomLoader!./widget';

当然，这不起作用，因为 TypeScript 不知道如何解释 webpack 的加载器语法。理想情况下，TypeScript 会忽略 !只需查看 './widget' 以进行类型检查。

我考虑的另一种可能性是通过在 webpack.config 中指定它来让所有 .ts 文件通过 myCustomLoader，然后使用某种查询字符串来指示它完成它的工作。例如：

import widget from './widget?myCustomLoader=true';

但 TypeScript 仍然无法处理。显然直接使用 require 会起作用：

var widget = require('myCustomLoader!./widget');

...但是我失去了 TypeScript 提供的所有类型安全性。任何人都可以提出一种方法来指定（或以其他方式与之交互）自定义 webpack 加载器，并且仍然保持 TypeScript 导入语法的类型安全优势吗？

【问题讨论】：

您的小部件是什么类型的内容？常规 JavaScript？打字稿？文件的扩展名是什么？你能描述一下这里有一个自定义加载器的用例吗？

【参考方案1】：

你是否考虑过在你的 webpack 配置中为不同的情况配置两个加载器？可以为每个加载程序配置定义包含和排除。这可以通过定义两个条目来解决您的问题，一个仅用于ts-loader，一个用于custom-loader。

  module: 
    loaders: [
      
        test: /\.js$/,
        include: [
          path.resolve(__dirname, "app/src/special/widgets")
        ],
        loader: "custom-loader"
      ,
      
        test: /\.ts$/,
        exclude: [
          path.resolve(__dirname, "app/src/special/widgets")
        ],
        loader: "ts-loader"
      
    ]
  

当路径匹配时，这允许仅从 './widget' 导入小部件。

如果您可以轻松地将其与正则表达式匹配，则另一种选择是在小部件上添加特殊的test。

如果您的小部件还需要由 ts-loader 处理（因为您将其编写为 typescript 文件），您也可以在配置中链接加载器。如果代码在进入 ts-loader 之前必须由自定义加载器处理，这看起来像 loader: "ts-loader!custom-loader"。

请查看webpack docs on module loaders了解更多信息。

【讨论】：

确实如此，但它不能回答问题。我还想在我的 Angular 项目中使用内联加载器而不更改默认的 Webpack 配置。