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

Question

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

import widget from 'myCustomLoader!./widget';

当然，这是行不通的，因为 TypeScript 不知道如何解释 webpack 的加载器语法。理想情况下，TypeScript 会忽略 ! 之前的所有内容。为了类型检查的目的，只需查看'./widget'。

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

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

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

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

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

Answer 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 处理（因为您将其编写为打字稿文件），那么您也可以在配置中链接加载器。这看起来就像loader: "ts-loader!custom-loader"代码在进入 ts-loader 之前必须由自定义加载器处理。

请检查模块加载器上的 webpack 文档以获取更多信息。