如何使用 webpack-chain 将 appendTsSuffixTo 选项添加到 ts-loader？

Posted 2023-02-22

【中文标题】如何使用 webpack-chain 将 appendTsSuffixTo 选项添加到 ts-loader？

【英文标题】：How to use webpack-chain to add appendTsSuffixTo options to ts-loader?

【发布时间】：2019-06-08 03:17:44

【问题描述】：

简单来说，如何使用 webpack-loader 将以下选项添加到ts-loader 插件中：

options: 
  appendTsSuffixTo: [/\.vue$/]

目前我为 ts-loader 设置了这个设置（顶部是这里的上下文）。底部的config.plugin 电话是给我带来麻烦的区域。

    chainWebpack: config => 
      config.module
        .rule('typescript')
        .test(/\.tsx?$/)
        .exclude
          .add(/node_modules/)
          .end()
        .use('ts-loader')
          .loader('ts-loader'),

      config
        .plugin('ts-loader')
        .tap( args =>  return  appendTsSuffixTo: [/\.vue$/]  
        )
    

但这会引发异常：

无法读取未定义的属性“__expression”

webpack-loader docs 没有准确描述添加选项时应该做什么。

我需要做什么才能添加此选项？

【参考方案1】：

查看modifying options 的加载程序部分：

config.module
  .rule('typescript')
  .use('ts-loader')
    .tap(options => merge(options, 
      appendTsSuffixTo: [/\.vue$/]
    ));

更新

这是merging 对象的相关文档。

这个GitHub 线程提供了很好的例子。

// preserve existing options
config.module
  .rule('typescript')
  .use('ts-loader')
    .tap(options => ( ...options, 
      appendTsSuffixTo: [/\.vue$/]
    ));

【讨论】：

您好，在该示例中，merge 调用是否出错？这不是我定义的东西。我想它正在合并对象，但我不想对 webpack 做任何假设......

不，merge 是一种通过chainmap 可用的方法。答案中的merge 实际上是文档中的逐字记录。

明白了。不知道为什么文档本身使用merge，我收到一个错误，即未定义合并。我需要使用config.merge()。虽然这会引发错误omit.includes is not a function...

注意，omit.includes is not a function 是我的错。我的链末尾有一个,。如果您使用来自here 的额外options() 信息更新您的答案，我将接受您的答案。

我也不确定他们为什么使用这种方式合并，也许只是假设它是从配置对象中解构的。该 GitHub 线程是一个很好的资源，有清晰的示例，感谢链接！